/* CSS Document */
.pr {
position: relative;
}
.pa {
position: absolute!important;
}
.row {
overflow: hidden;
}
.row .topTitle {
position: relative;
text-align: center;
font-size: 1.71rem;
margin: 60px 0;
}
.row .topTitle .small {
font-size: 1.14rem;
margin-top: 10px;
text-transform: uppercase;
color: #999;
display: inline-block;
text-align: center;
}
.row .topTitle:after {
content: "";
height: 2px;
width: 40px;
background-color: #337aff;
bottom: -24px;
left: calc(50% - 20px);
position: absolute;
}
.row .leftCol {
float: left;
}
.row .rightCol {
float: right;
}
.backImg {
background-size: cover!important;
background-position: center;
}
.picBox {
overflow: hidden;
}
.picBox > .backImg {
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
height: 100%;
width: 100%;
}
.picBox:hover > .backImg {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.cl {
clear: both;
}
.msg {
display: table;
width: 100%;
height: 100%;
}
.msg .msgContent {
display: table-cell;
vertical-align: middle;
}
.msg .msgContent h4 {
font-size: 2.5rem;
color: #231815;
margin-bottom: 30px;
position: relative;
text-align: left;
min-height: 3.2rem;
line-height: 3.2rem;
padding-top: 1rem;
}
.msg .msgContent h4:after {
content: '';
position: absolute;
left: 7px;
top: 0;
width: 120px;
height: 2px;
background-color: #b49e8c;
transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.msg .msgContent h4 .small {
font-size: 1rem;
display: inline-block;
text-transform: uppercase;
}
.msg .msgContent .active:after {
width: 22px;
}
.msg .msgContent h5 {
font-size: 24px;
color: #0f0f0f;
font-weight: 700;
margin-bottom: 30px;
height: 72px;
}
.msg .msgContent p {
color: #666;
line-height: 25px;
font-size: 1rem;
margin-bottom: 30px;
min-height: 8rem;
}
.msg .msgContent p > strong {
text-transform: uppercase;
font-family: num;
transform-origin: 0 50%;
display: inline-block;
width: 136px;
text-align: center;
height: 120px;
line-height: 100px;
float: left;
font-size: 100px;
vertical-align: top;
color: #231815;
}
.msg .msgContent .cl {
height: 4rem;
line-height: 4rem;
}
/* æœç´¢ */
.searchBox {
display: inline-block;
margin-right: 8px;
position: relative;
padding-right: 1rem;
height: 0.5rem;
width: 40%;
}
.searchBox > input {
border: none;
border-bottom: 1px solid #cbcbcb;
font-size: 0.16rem;
width: 100%;
height: 0.5rem;
background-color: transparent;
}
.searchBox .searchBtn {
right: 0;
display: block;
top: 0;
width: 1rem;
height: 0.5rem;
cursor: pointer;
position: relative;
box-sizing: content-box;
min-width: 1rem;
height: 0.3rem;
line-height: 0.3rem;
padding: 0.2rem 0.2rem;
position: absolute;
padding: 0.1rem 0;
z-index: 1000;
}
.searchBox .searchBtn > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.3rem;
line-height: 0.3rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
.searchBox .searchBtn:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0deg);
-webkit-transform: skew(-8deg, 0deg);
-moz-transform: skew(-8deg, 0deg);
-o-transform: skew(-8deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.searchBox .searchBtn > a {
font-size: 0.18rem;
color: #fff!important;
font-weight: bold;
}
.searchBox .searchBtn:after {
background-color: #2740bf!important;
}
.searchBox .searchBtn:hover:after {
box-shadow: 0 10px 40px -5px rgba(39, 64, 191, 0.3);
}
/* æ–°é—»æ–‡ç« åˆ—è¡¨ */
.layout-articles {
border-bottom: 1px solid #eee;
}
.layout-articles .layout-top {
display: inline-block;
}
.layout-articles .layout-top h4.layout-title {
text-align: left;
font-weight: bold;
font-size: 0.18rem;
color: #545454;
margin-bottom: 10px;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.layout-articles .layout-top > small {
display: block;
font-weight: 500;
color: #6a6a6a;
font-size: 0.13rem;
margin: 0.15rem 0 0.2rem 0;
}
.layout-articles p {
line-height: 150%;
font-size: 14px;
color: #a6a6a6;
}
.layout-articles .layout-btm {
clear: both;
height: 0.45rem;
line-height: 0.45rem;
padding: 0.3rem 0;
position: relative;
box-sizing: content-box;
}
.layout-articles .layout-btm > .btn {
background-color: #f0f4f7;
color: #6a6a6a;
width: 1.25rem;
height: 0.45rem;
line-height: 0.45rem;
text-align: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 0.13rem;
}
.layout-articles:not(:last-child) {
margin-bottom: 0.7rem;
}
.btn {
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.btn > i {
font-size: 1.4rem;
margin-right: 8px;
font-weight: 100;
}
.small {
color: #b4b9bf;
font-size: 0.875rem;
}
.more {
display: inline-block;
width: 68px;
height: 30px;
line-height: 30px;
}
.Thover1 {
position: relative;
z-index: 5;
overflow: hidden;
}
.Thover1:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: auto;
width: 3px;
height: 3px;
border-radius: 50%;
opacity: 0;
background-color: #fff;
z-index: -1;
transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
transform-origin: 50% 50%;
}
.Thover1:hover:after {
opacity: 1;
transform: scale(120);
-webkit-transform: scale(120);
-moz-transform: scale(120);
-o-transform: scale(120);
background-color: #2640bf;
}
.bur {
-webkit-filter: blur(3px);
filter: blur(3px);
}
#Tbox {
transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.anchorBL {
display: none;
}
.lineBox {
position: relative;
}
.lineBox .Sline {
position: absolute;
top: 0;
left: 0;
z-index: 2;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
fill: none;
stroke: #92989e;
pointer-events: none;
-webkit-transition: -webkit-transform 0.7s, stroke 0.7s, stroke-width 0.7s;
transition: transform 0.7s, stroke 0.7s, stroke-width 0.7s;
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.lineBox:hover .Sline {
stroke: #fff!important;
stroke-width: 2px;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
/*曾*1.29*/
input[type=range] {
-webkit-appearance: none;
width: 300px;
background: -webkit-linear-gradient(#059cfa, #059cfa) no-repeat;
background-size: 0% 100%;
border-radius: 10px;
/*这个属性设置使填充进度æ¡æ—¶çš„图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2px;
border-radius: 0px;
/*将轨é“设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 12px 12px #0d1112;
/*轨é“内置阴影效果*/
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -12px;
/*使滑å—超出轨é“部分的å移é‡ç›¸ç‰*/
background: #69adff;
border-radius: 50%;
/*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5);
/*设置边框*/
box-shadow: 0 .125em .125em #3b4547;
/*æ·»åŠ åº•éƒ¨é˜´å½±*/
}
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff);
height: 13px;
border-radius: 10px;
}
input[type=range]::-ms-track {
height: 25px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
border-color: transparent;
/*去除原有边框*/
color: transparent;
/*去除轨é“内的竖线*/
}
input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5);
height: 25px;
width: 25px;
border-radius: 50%;
background: #ffffff;
margin-top: -5px;
box-shadow: 0 .125em .125em #3b4547;
}
input[type=range]::-ms-fill-lower {
/*进度æ¡å·²å¡«å……的部分*/
height: 22px;
border-radius: 10px;
background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff);
}
input[type=range]::-ms-fill-upper {
/*进度æ¡æœªå¡«å……的部分*/
height: 22px;
border-radius: 10px;
background: #ffffff;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff);
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
#bloc {
position: relative;
}
#bloc .mask {
position: fixed;
background-color: rgba(15, 15, 15, 0.6);
width: calc(100% - 258px);
height: 100%;
top: 0;
right: 0;
display: none;
z-index: -1;
}
#bloc .myClick {
cursor: pointer;
}
#bloc #header {
height: 1rem;
background-color: transparent;
width: 100%;
top: 0;
left: 0;
position: absolute;
box-sizing: border-box;
z-index: 5000;
margin: auto;
right: 0;
padding: 0 4%;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #header.active{
height: 0.6rem;
}
#bloc #header #logo {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 5%;
z-index: 1000;
}
#bloc #header #logo > img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#bloc #header #nav {
height: 1rem;
position: relative;
z-index: 1000;
float: right;
padding-right: 200px;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #header.active #nav{
height: 0.6rem;
}
#bloc #header #nav .item {
width: 100%;
overflow: visible;
box-sizing: border-box;
text-align: center;
}
#bloc #header #nav .item .navlist {
height: 1rem;
line-height: 1rem;
width: 1rem;
float: left;
text-align: center;
transform-origin: 50% 20%;
visibility: hidden;
}
#bloc #header.active #nav .item .navlist{
height: 0.6rem;
line-height: 0.6rem;
}
#bloc #header #nav .item .navlist > a {
text-align: left;
display: inline-block;
width: 100%;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
font-size: 0.15rem;
position: relative;
font-weight: 500;
text-align: center;
color: rgba(255, 255, 255, 0.5);
vertical-align: top;
}
#bloc #header #nav .item .navlist:hover a {
color: #ffffff;
}
#bloc #header #nav .item .thisNav a {
color: #ffffff;
font-weight: 700;
font-size: 0.15rem;
}
#bloc #header #nav .otherItem {
position: absolute;
height: 100%;
width: 2rem;
overflow: hidden;
padding: 0.25rem 0;
box-sizing: border-box;
right: 0;
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #header.active #nav .otherItem{
padding: 0.05rem 0;
}
#bloc #header #nav .otherItem > span {
display: flex;
float: left;
width: 40%;
height: 0.5rem;
justify-content: center;
}
#bloc #header #nav .otherItem > span > a {
display: inline-block;
text-align: center;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
font-size: 0.14rem;
height: 0.5rem;
line-height: 0.5rem;
color: rgba(255, 255, 255, 0.5);
}
#bloc #header #nav .otherItem > span > a:hover {
color: #ffffff;
}
#bloc #header #nav .otherItem > span:nth-child(2) {
margin-left: 10%;
}
#bloc #header #nav .otherItem > span:nth-child(2) > a {
width: calc(100%/3);
}
#bloc #header #nav .otherItem > span:nth-child(1) {
margin-left: 5%;
margin-right: 5%;
}
#bloc #header #nav .otherItem > span:nth-child(1) > a {
width: 50%;
font-size: 0.2rem;
}
#bloc #header #nav .otherItem > span .active {
color: #ffffff;
font-weight: bold;
}
#bloc #header #nav .otherItem:after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0 ;
width: 1px;
height: 0.2rem;
background-color: rgba(255, 255, 255, 0.5);
}
#bloc #header #nav .childItem {
position: absolute;
height: 2.4rem;
width: 200%;
top: 80%;
left: 0;
display: none;
}
#bloc #header #nav .childItem .navMask {
position: absolute;
height: 3.9rem;
z-index: -1;
width: 1rem;
bottom: 0;
background-color: rgba(17, 95, 173, 0.37);
left: 1rem;
}
#bloc #header #nav .childItem .childNav {
position: absolute;
top: 0;
left: 1rem;
width: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
}
#bloc #header #nav .childItem .childNav > li {
display: table;
float: left;
position: relative;
height: 0.32rem;
text-align: left;
width: 100%;
margin-left: 22px;
animation-duration: 0.3s;
}
#bloc #header #nav .childItem .childNav > li > a {
display: table-cell;
vertical-align: middle;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
font-family: sans-serif;
font-size: 0.13rem;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
}
#bloc #header #nav .childItem .childNav > li > a:hover {
color: #ffffff;
font-weight: bold;
}
#bloc #header #nav .childItem .childNav:nth-child(2) {
left: 2rem;
}
#bloc #header #nav .childItem .childNav:nth-child(3) {
left: 3rem;
}
#bloc #header #nav .childItem .childNav:nth-child(4) {
left: 4rem;
}
#bloc #header #nav .childItem .childNav:nth-child(4) > li {
margin-left: 12px;
}
#bloc #header #nav .childItem .childNav:nth-child(5) {
left: 5rem;
}
#bloc #header #nav .childItem .language {
left: 6rem;
width: 2rem;
}
#bloc #header #nav .childItem .language > li > a {
opacity: 0.5;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
font-family: En_light;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
#bloc #header #nav .childItem .language > li > a > img {
margin-right: 0.08rem;
}
#bloc #header #nav .childItem .language > li > a:hover {
opacity: 1;
color: #fff;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter: gray;
}
#bloc #header #nav .childItem .language > li > a.on {
opacity: 1;
color: #fff;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter: gray;
}
#bloc #header nav.app-nav {
position: fixed;
top: 0;
right: 0;
height: 0.6rem;
line-height: 0.6rem;
width: 0.5rem;
display: none;
z-index: 20;
}
#bloc #header nav.app-nav > ul {
display: none;
position: absolute;
top: 100%;
right: 0;
border-bottom: 2px solid #d2d2d2;
}
#bloc #header nav.app-nav > ul > li {
width: 100%;
line-height: 0.4rem;
text-align: center;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
border-top: 1px solid #eee;
font-weight: bold;
}
#bloc #header nav.app-nav > ul > li > a {
display: inline-block;
width: 100%;
color: rgba(0, 0, 0, 0.7);
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav {
padding: 0;
overflow: hidden;
background-color: rgba(226, 226, 226, 0.7);
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav > li {
width: 50%;
float: left;
text-align: center;
line-height: 0.4rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
height: 0;
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down > li{
width: 100%;
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav > li > a {
display: inline-block;
width: 100%;
color: rgba(47, 47, 47, 0.7);
height: 0.4rem;
line-height: 0.4rem;
overflow: hidden;
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav.on > li {
height: 0.4rem;
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down.on > li{
height: 150px;
width: 100%;
}
#bloc #header nav.app-nav > ul > li.child-Down > .child-nav.erwei-down > li > a{
height: 150px;
padding-top: 8px;
}
#bloc #header nav.app-nav .getAppNav {
font-size: 0.28rem;
z-index: 6;
position: absolute;
width: 100%;
height: 100%;
margin: auto;
right: 0;
text-align: center;
cursor: pointer;
}
#bloc #header nav.app-nav .getAppNav > span {
position: absolute;
width: 0.28rem;
height: 2px;
background-color: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
}
#bloc #header nav.app-nav .getAppNav:after {
content: '';
position: absolute;
width: 0.28rem;
height: 2px;
background-color: #fff;
top: -16px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
}
#bloc #header nav.app-nav .getAppNav:before {
content: '';
position: absolute;
width: 0.28rem;
height: 2px;
background-color: #fff;
top: 16px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
}
#bloc #header nav.app-nav .menuActive > span {
opacity: 0!important;
}
#bloc #header nav.app-nav .menuActive:after {
transform: rotate(45deg);
transform-origin: 50% 50%;
top: 0px!important;
}
#bloc #header nav.app-nav .menuActive:before {
transform: rotate(-45deg);
transform-origin: 50% 50%;
top: 0px!important;
}
#bloc #header:after {
content: '';
position: absolute;
width: 100%;
height: 1rem;
z-index: 15;
left: 0;
top: 0%;
background-color: rgba(0, 0, 0, 0.38);
opacity: 1;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform-origin: 50% 0;
}
#bloc #header.active:after{
height: 0.6rem;
}
#bloc #header.on:after {
opacity: 1;
top: 0%;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
height: 3.2rem;
background-color: rgba(0, 0, 0, 0.7);
}
#bloc #center {
position: relative;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main {
width: 100%;
position: relative;
}
#bloc #center #main .content {
box-sizing: content-box;
}
#bloc #center #main .content #indexBanner {
height: 100%;
position: relative;
}
#bloc #center #main .content #indexBanner nav {
position: absolute;
top: 0;
bottom: 0;
right: 8%;
margin: auto;
width: 50px;
z-index: 1000;
padding: 0 5px;
box-sizing: content-box;
visibility: hidden;
}
#bloc #center #main .content #indexBanner .numChoose {
position: absolute;
top: 0;
bottom: 0;
right: 10%;
width: 1.2rem;
margin: auto;
z-index: 1000;
height: 1.6rem;
}
#bloc #center #main .content #indexBanner .numChoose > li {
font-size: 0.15rem;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-align: right;
padding-right: 0.1rem;
height: 0.4rem;
line-height: 0.4rem;
width: 100%;
transition: 0.3s all cubic-bezier(0.27, 0.54, 0.44, 0.85);
font-family: num;
opacity: 1;
cursor: pointer;
pointer-events: inherit;
}
#bloc #center #main .content #indexBanner .numChoose > li:after {
content: "";
position: absolute;
right: 0;
opacity: 0;
width: 100%;
height: 3px;
background-color: #fff;
bottom: 0;
transition: 7s width cubic-bezier(0.36, 0, 0.59, 0.84);
}
#bloc #center #main .content #indexBanner .numChoose > li:hover {
color: #fff;
}
#bloc #center #main .content #indexBanner .numChoose .active {
color: #fff;
}
#bloc #center #main .content #indexBanner .numChoose .active:after {
opacity: 1;
width: 0%;
}
#bloc #center #main .content #indexBanner .Tmsg {
position: absolute;
left: 10%;
bottom: 15%;
z-index: 1000;
width: 7rem;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list {
display: none;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list > span {
font-size: 0.48rem;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px #000000;
display: block;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list > small {
font-size: 0.36rem;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 5px;
text-transform: uppercase;
font-family: En_bold;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(1) .list.show {
display: inline-block;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2) {
font-size: 0.14rem;
padding-left: 0.4rem;
position: relative;
color: #fff;
height: 0.28rem;
line-height: 0.28rem;
margin: 40px 0;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2):after {
content: '';
position: absolute;
width: 18px;
height: 28px;
border-radius: 50px;
left: 5px;
background-color: #262626;
top: -4px;
/*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(2):before {
content: "";
position: absolute;
width: 2px;
height: 7px;
left: 13px;
top: 7px;
background-color: #ffffff;
border-radius: 50px;
z-index: 5;
-webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
@-webkit-keyframes Tmouse {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
-ms-transform: translateY(-8px);
-o-transform: translateY(-8px);
transform: translateY(-5px);
}
}
@keyframes Tmouse {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
-ms-transform: translateY(-8px);
-o-transform: translateY(-8px);
transform: translateY(-8px);
}
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(3) {
width: 100%;
height: 1px;
position: relative;
background-color: rgba(0, 0, 0, 0.2);
margin: 60px 0;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(3):after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
bottom: -1px;
left: 0;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) {
line-height: 34px;
position: relative;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > span {
font-size: 0.18rem;font-weight: lighter;
color: #fff;
display: block;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > small {
font-size: 0.16rem;
color: #fff;
font-weight: bold;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore {
position: absolute;
width: 0.68rem;
height: 0.68rem;
left: 4rem;
border-radius: 50%;
line-height: 0.68rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
cursor: pointer;
display: inline-block;
transition-origin: 50% 50%;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore > i {
font-size: 0.24rem;
color: #fff;
}
#bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore:hover {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bloc #center #main .content #indexBanner .go {
-webkit-filter: blur(12px);
filter: blur(12px);
transform: scale(1.2);
opacity: 1;
-webkit-animation: scaleDownFadeIn 1s forwards ease;
animation: scaleDownFadeIn 1s forwards ease;
}
#bloc #center #main .content .rowMain {
max-width: 1200px;
margin: auto;
overflow: hidden;
box-sizing: content-box;
position: relative;
padding: 0px 5%;
z-index: 2000;
/* padding-bottom: 36px; */
}
#bloc #center #main .content .row {
margin: auto;
padding: 20px 5%;
box-sizing: content-box;
position: relative;
overflow: visible;
}
#bloc #center #main .content .skew {
transform: skew(0, -2.4deg);
-webkit-transform: skew(0, -2.4deg);
-moz-transform: skew(0, -2.4deg);
-o-transform: skew(0, -2.4deg);
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform-origin: left top;
background: #fff;
}
#bloc #center #main .content .banner {
width: 100%;
position: relative;
}
#bloc #center #main .content .banner .Tmsg {
position: absolute;
left: 20%;
z-index: 1000;
width: 7rem;
bottom: 25%;
padding-bottom: 0.2rem;
}
#bloc #center #main .content .banner .Tmsg:after {
content: '';
position: absolute;
height: 1px;
width: 2.2rem;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8);
}
#bloc #center #main .content .banner .Tmsg > div:nth-child(1) {
font-size: 0.14rem;
color: #fff;
letter-spacing: 10px;
height: 0.8rem;
line-height: 0.8rem;
}
#bloc #center #main .content .banner .Tmsg > div:nth-child(2) {
font-size: 0.24rem;
padding-right: 0.4rem;
position: relative;
color: #fff;
height: 0.28rem;
line-height: 0.28rem;
text-transform: uppercase;
width: 2rem;
font-family: En_bold;
}
#bloc #center #main .content .banner .Tmsg > div:nth-child(2):after {
content: '';
position: absolute;
width: 18px;
height: 28px;
border-radius: 50px;
right: 5px;
background-color: #fff;
top: -4px;
/*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/
}
#bloc #center #main .content .banner .Tmsg > div:nth-child(2):before {
content: "";
position: absolute;
width: 2px;
height: 7px;
right: 13px;
top: 7px;
background-color: #262626;
border-radius: 50px;
z-index: 5;
-webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
#bloc #center #main .content .banner > img {
width: 100%;
filter: blur(0px);
transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 2s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .banner > img.go {
filter: blur(0px);
}
#bloc #center #main .content .banner > .buleMask1 {
mix-blend-mode: multiply;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
position: absolute;
width: 100%;
height: 100%;
right: 100%;
bottom: 0;
margin: auto;
background-color: #275cfd;
z-index: 1000;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
transform-origin: 0 50%;
}
#bloc #center #main .content .banner > .buleMask1.go {
/* right: 64%; */
-webkit-animation: bannergo 2s forwards ease-in-out;
animation: bannergo 2s forwards ease-in-out;
}
@-webkit-keyframes bannergo {
0% {
right: 0%;
opacity: 1;
}
60% {
right: -100%;
opacity: 1;
}
61% {
right: 100%;
opacity: 0;
}
100% {
right: 63%;
opacity: 1;
}
}
@keyframes bannergo {
0% {
right: 100%;
opacity: 1;
}
60% {
right: -100%;
opacity: 1;
}
60.0001% {
right: 100%;
opacity: 0;
}
100% {
right: 63%;
opacity: 1;
}
}
#bloc #center #main .content .banner .b_txt {
position: absolute;
top: -30%;
bottom: 0;
left: 20%;
margin: auto;
line-height: 60px;
z-index: 1001;
/* text-shadow:2px 0 2px rgba(20,35,51,0.2); */
height: 100px;
color: transparent;
transition: 1.2s all ease-in-out;
}
#bloc #center #main .content .banner .b_txt > span {
font-size: 0.52rem;
font-weight: bold;
color: #fff;
letter-spacing: 25px;
text-shadow: 0 1px 1px #000000;
display: block;
transition: 1.5s all ease-in-out 1.2s;
}
#bloc #center #main .content .banner .b_txt > small {
font-size: 0.28rem;
color: #ffffff;
letter-spacing: 25px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 1.5s all ease-in-out 1.2s;
font-family: En_bold;
}
#bloc #center #main .content .banner .b_txt > small >p{
font-size: 24px;
white-space: nowrap;
}
#bloc #center #main .content .banner .b_txt > small > em{
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
transition: 1.5s all ease-in-out 1.2s;
font-size: 50px;
}
#bloc #center #main .content .banner .b_txt .picMove {
height: 46px;
line-height: 46px;
margin: 0.3rem 0 1.4rem 0;
position: absolute;
left: -12px;
}
#bloc #center #main .content .banner .b_txt .picMove > a {
display: table-cell;
width: 46px;
height: 46px;
border-radius: 50%;
position: relative;
background-color: transparent;
line-height: 46px;
text-align: center;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
color: rgba(255, 255, 255, 0.5);
vertical-align: top;
}
#bloc #center #main .content .banner .b_txt .picMove > a:hover {
color: #ffffff;
}
#bloc #center #main .content .banner .b_txt .picMove .next:after {
content: attr(data-href);
position: absolute;
left: 100%;
height: 100%;
width: 200px;
text-align: left;
text-indent: 0.1rem;
font-weight: bold;
}
#bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4),#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3) {
font-size: 0.14rem;
padding-left: 0.4rem;
position: relative;
color: #fff;
height: 0.28rem;
line-height: 0.28rem;
margin: 40px 0 54px 0;
letter-spacing: 8px;
padding-bottom: 8px;
box-sizing: content-box;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
#bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4):after,#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3):after {
content: '';
position: absolute;
width: 18px;
height: 28px;
border-radius: 50px;
left: 5px;
background-color: #ffffff;
top: -4px;
/*-webkit-animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(.56,.01,.46,1) infinite alternate;*/
}
#bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4):before,#bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3):before {
content: "";
position: absolute;
width: 2px;
height: 7px;
left: 13px;
top: 7px;
background-color: #262626;
border-radius: 50px;
z-index: 5;
-webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
#bloc #center #main .content .banner .b_txt.go {
filter: blur(0px);
}
#bloc #center #main .content .banner .b_txt.go > span {
letter-spacing: 0;
}
#bloc #center #main .content .banner .b_txt.go > small {
letter-spacing: 0;
}
#bloc #center #main .content .bannerPro > img.go {
}
#bloc #center #main .content .bannerPro .b_txt {
top: -20%;
line-height: 52px;
}
#bloc #center #main .content .bannerPro .b_txt > label {
color: #fff;
display: block;
font-size: 0.18rem;
height: 0.4rem;
line-height: 0.6rem;
}
#bloc #center #main .content .bannerPro .aniBtn {
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 1002;
width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
visibility: hidden;
bottom: 15%;
padding: 6px 6px;
box-sizing: content-box;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50px;
}
#bloc #center #main .content .bannerPro .aniBtn > a {
display: inline-block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
background-color: #337aff;
width: calc(100% - 12px);
left: 6px;
top: 6px;
color: #fff;
text-align: center;
border-radius: 50px;
font-size: 0.16rem;
}
#bloc #center #main .content .bannerPro .aniBtn > a.leftbtn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#bloc #center #main .content .bannerPro .aniBtn > a.rightbtn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
right: 6px;
left: auto;
}
#bloc #center #main .content .bannerPro .aniBtn > a.on {
background-color: #39414f;
}
#bloc #center #main .content .bannerPro .aniBtn:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
top: 0;
left: 0;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: -1;
pointer-events: none;
animation-delay: 0.5s;
animation: anibtn2 2s ease infinite ;
}
#bloc #center #main .content .bannerPro .aniBtn:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
top: 0;
left: 0;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: -1;
pointer-events: none;
animation: anibtn1 2s ease infinite ;
}
@-webkit-keyframes anibtn1 {
0% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
opacity: 0;
}
}
@-webkit-keyframes anibtn2 {
0% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1.4);
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
opacity: 0;
}
}
#bloc #center #main .content .bannerPro .myvideo {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
pointer-events: none;
}
#bloc #center #main .content .bannerPro .myvideo.on {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
#bloc #center #main .content .bannerPro .myvideo video {
opacity: 0;
pointer-events: none;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .bannerPro .myvideo video.on {
visibility: visible;
filter: blur(0px);
opacity: 1;
pointer-events: auto;
}
#bloc #center #main .content .bannerPro .myvideo .Tmain {
width: 100%;
height: 100%;
}
#bloc #center #main .content .bannerPro .myvideo .fenwei {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
margin: auto;
display: none;
}
#bloc #center #main .content .bannerPro .myvideo .tiaoguang {
position: absolute;
top: 0;
height: 100%;
left: 0;
right: 0;
margin: auto;
opacity: 0;
}
#bloc #center #main .content .bannerPro .myvideo .Vchange {
pointer-events: none;
}
#bloc #center #main .content .bannerPro .myvideo .Vchange.on {
pointer-events: auto;
}
#bloc #center #main .content .bannerPro .myvideo .gere {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bloc #center #main .content .bannerPro .myvideo .gere i {
color: #fff;
font-size: 0.24rem;
}
#bloc #center #main .content .bannerPro .myvideo .dotItem {
text-align: center;
width: 100%;
}
#bloc #center #main .content .bannerPro .myvideo .dotItem > li {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
margin: 0 30px;
background-color: #000;
position: relative;
cursor: pointer;
}
#bloc #center #main .content .bannerPro .myvideo .dotItem > li svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: scale(1.8);
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
}
#bloc #center #main .content .bannerPro .myvideo .dotItem > li svg circle {
transform: translate(12px, 12px);
-webkit-transform: translate(12px, 12px);
-moz-transform: translate(12px, 12px);
-o-transform: translate(12px, 12px);
fill: transparent;
opacity: 0.5;
stroke-dasharray: 80px;
stroke-dashoffset: 82px;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .bannerPro .myvideo .dotItem > li.on svg circle,
#bloc #center #main .content .bannerPro .myvideo .dotItem > li:hover svg circle {
stroke-dashoffset: 16px;
}
#bloc #center #main .content .bannerPro .myvideo .videoTxt {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 15%;
text-align: center;
display: none;
z-index: 1000;
}
#bloc #center #main .content .bannerPro .myvideo .videoTxt > font {
color: #fff;
font-size: 0.4rem;
font-weight: bold;
}
#bloc #center #main .content .bannerPro .myvideo .videoTxt .tiaoguang_p {
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 0.32rem;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
margin-bottom: 70px;
}
#bloc #center #main .content .bannerPro .bannerMask {
opacity: 1;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
pointer-events: none;
}
#bloc #center #main .content .bannerPro .bannerMask.on {
opacity: 0;
}
#bloc #center #main .content .bannerPro .videoList {
opacity: 1;
}
#bloc #center #main .content .bannerPro .videoList.on {
opacity: 0;
pointer-events: none;
visibility: hidden!important;
animation: fadeOutDownSmall 1.2s ease;
}
#bloc #center #main .content .bannerPro .Tboli {
z-index: 1001;
right: 10%;
top: 0;
bottom: 0.3rem;
margin: auto;
height: 4rem;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox {
transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
-o-transform: skew(-15deg, 0deg);
position: relative;
box-sizing: content-box;
min-width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
padding: 0.2rem 0.2rem;
padding: 0.3rem 0;
margin: 0.3rem 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
-moz-transform: skew(-15deg, 0deg);
-o-transform: skew(-15deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox > a {
font-size: 0.16rem;
transform: skew(15deg, 0);
-webkit-transform: skew(15deg, 0);
-moz-transform: skew(15deg, 0);
-o-transform: skew(15deg, 0);
color: #fff!important;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv {
position: absolute;
opacity: 0;
visibility: hidden;
right: 100%;
background-color: #fff;
top: 0%;
width: 2.5rem;
padding: 0.2rem 0.4rem;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div {
transform: skew(15deg, 0);
-webkit-transform: skew(15deg, 0);
-moz-transform: skew(15deg, 0);
-o-transform: skew(15deg, 0);
line-height: 30px;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div > h5 {
margin-bottom: 20px;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div > span {
display: block;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv:after {
content: '';
position: absolute;
width: 5px;
height: 100%;
left: 0;
top: 0;
background-color: #255ed3;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:before {
content: '';
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background-color: #337aff;
mix-blend-mode: multiply;
left: 0;
top: 0;
opacity: 0;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.14);
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:after {
transform: skew(0, 0);
-webkit-transform: skew(0, 0);
-moz-transform: skew(0, 0);
-o-transform: skew(0, 0);
background-color: transparent;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover {
box-shadow: 0 15px 35px -10px rgba(33, 85, 198, 0.63);
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover:before {
visibility: visible;
opacity: 1;
}
#bloc #center #main .content .bannerPro .Tboli > li.skewBox:hover .adv {
visibility: visible;
top: 12%;
opacity: 1;
}
#bloc #center #main .content .p_top {
position: relative;
}
#bloc #center #main .content .p_top .top_nav {
display: flex;
align-items: flex-end;
height: 100px;
justify-content: center;
max-width: 1200px;
margin: auto;
padding: 0 5%;
box-sizing: content-box;
margin-bottom: 30px;
}
#bloc #center #main .content .p_top .top_nav > li {
max-width: 260px;
background-color: rgba(0, 74, 179, 0.8);
position: relative;
overflow: hidden;
line-height: 60px;
height: 60px;
width: 22%;
margin: 0 0.5px;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .p_top .top_nav > li:after {
content: '';
position: absolute;
width: 1px;
height: 21px;
bottom: -21px;
left: calc(50% - 0.5px);
transition: 0.5s all cubic-bezier(0.4, 0.46, 0.3, 1.31);
z-index: 3;
background: url(../images/top_line.png) center no-repeat;
}
#bloc #center #main .content .p_top .top_nav > li > a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 60px;
opacity: 0.5;
color: #fff;
text-align: center;
font-size: 18px;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .p_top .top_nav > li:hover {
height: 72px;
line-height: 50px;
background-color: #004ab3;
}
#bloc #center #main .content .p_top .top_nav > li:hover > a {
opacity: 1;
font-weight: bold;
}
#bloc #center #main .content .p_top .top_nav > li:hover:after {
bottom: 0;
}
#bloc #center #main .content .p_top .top_nav .choose {
height: 72px;
line-height: 50px;
background-color: #004ab3;
}
#bloc #center #main .content .p_top .top_nav .choose > a {
opacity: 1;
font-weight: bold;
}
#bloc #center #main .content .p_top .top_nav .choose:after {
bottom: 0;
}
#bloc #center #main .content .p_top:after {
content: '';
background-color: #e6e6e6;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
#bloc #center #main .content .p_title {
font-size: 24px;
font-weight: bold;
color: #262626;
height: 78px;
line-height: 78px;
text-align: center;
position: relative;
margin: 60px 0;
letter-spacing: 4px;
}
#bloc #center #main .content .p_title:after {
content: '';
position: absolute;
width: 24px;
height: 3px;
background-color: #cf2b1e;
bottom: 12px;
left: calc(50% - 12px);
}
#bloc #center #main .content > small {
display: block;
text-align: center;
font-size: 16px;
color: #666;
font-weight: 100;
line-height: 200%;
max-width: 1200px;
margin: auto;
letter-spacing: 0;
margin-top: -20px;
}
#bloc #center #main .content .mainContent {
position: relative;
}
#bloc #center #main .content .mainContent .nodeItem {
position: fixed;
right: 5%;
top: 0;
bottom: 0;
margin: auto;
width: 0.8rem;
z-index: 10000;
height: 2.4rem;
text-align: right;
display: inline-block;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .mainContent .nodeItem.on {
opacity: 1;
visibility: visible;
}
#bloc #center #main .content .mainContent .nodeItem > a {
display: block;
width: 100%;
color: #ccc;
font-size: 0.14rem;
cursor: pointer;
font-family: En_bold;
height: 0.32rem;
line-height: 0.32rem;
position: relative;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .mainContent .nodeItem > a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #2640bf;
bottom: 0px;
left: 10px;
opacity: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .mainContent .nodeItem > a:before {
content: attr(data-title);
position: absolute;
left: 0;
opacity: 0;
font-size: 0.12rem;
color: #333;
width: 100%;
text-align: right;
font-weight: bold;
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-moz-transform: translateX(-10px);
-o-transform: translateX(-10px);
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#bloc #center #main .content .mainContent .nodeItem > a.on,
#bloc #center #main .content .mainContent .nodeItem > a:hover {
color: rgba(255, 255, 255, 0);
}
#bloc #center #main .content .mainContent .nodeItem > a.on:after,
#bloc #center #main .content .mainContent .nodeItem > a:hover:after {
opacity: 1;
left: 0;
}
#bloc #center #main .content .mainContent .nodeItem > a.on:before,
#bloc #center #main .content .mainContent .nodeItem > a:hover:before {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
}
#bloc #footer {
position: relative;
height: 1.2rem;
background-color: #1a1a1a;
padding: 0.2rem 0 0.35rem 0;
box-sizing: content-box;
z-index: 1000;
}
#bloc #footer .skew {
transform: skew(0, -2.4deg);
-webkit-transform: skew(0, -2.4deg);
-moz-transform: skew(0, -2.4deg);
-o-transform: skew(0, -2.4deg);
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform-origin: left top;
background-color: #1a1a1a;
}
#bloc #footer .toTop {
position: absolute;
height: 0.46rem;
line-height: 0.43rem;
width: 0.46rem;
border-radius: 50%;
top: -0.5rem;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 2px 2px rgba(255, 255, 255, 0.9);
text-align: center;
background: rgba(0, 0, 0, 0.9);
/* 一些ä¸æ”¯æŒèƒŒæ™¯æ¸å˜çš„æµè§ˆå™¨ */
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.3)));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
z-index: 10000;
-webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
#bloc #footer .toTop > i {
color: #fff;
font-size: 0.3rem;
}
#bloc #footer .rowMain {
position: relative;
z-index: 1002;
}
#bloc #footer .rowMain > div {
height: 0.4rem;
text-align: center;
}
#bloc #footer .rowMain > div > span {
display: inline-block;
text-align: center;
font-size: 0.16rem;
height: 100%;
vertical-align: top;
line-height: 0.4rem;
}
#bloc #footer .rowMain > div > span > i {
display: inline-block;
vertical-align: top;
color: #fff;
font-size: 0.22rem;
padding: 0 0.15rem;
}
#bloc #footer .rowMain > div > span > a {
font-size: 0.16rem;
display: inline-block;
vertical-align: top;
}
#bloc #pop {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
z-index: 10005;
}
#bloc #pop .propop {
position: absolute;
top: 0;
bottom: 0%;
left: 0;
right: 0;
margin: auto;
display: none;
}
#bloc #pop .propop > img {
max-width: 100%;
}
#bloc #pop .propop > ul {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
}
#bloc #pop .propop > ul > li {
display: inline-block;
width: 16%;
border-radius: 5px;
background-color: #eee;
margin: 0 0.5%;
margin-top: 24.5%;
opacity: 0;
}
#bloc #pop .propop > ul > li > a {
display: inline-block;
width: 100%;
height: 100%;
}
#bloc #pop .propop.on {
display: block;
}
/*end*/
#index .row .rowMain {
padding: 0px 5%;
z-index: 2000;
padding-bottom: 36px;
}
#index .row .rowMain .r_top .title {
text-align: right;
transform: scale(1.2) translateY(20px);
-webkit-transform: scale(1.2) translateY(20px);
-moz-transform: scale(1.2) translateY(20px);
-o-transform: scale(1.2) translateY(20px);
transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1.3s cubic-bezier(0.7, 0.01, 0.3, 1);
filter: blur(3px);
padding-bottom: 10px;
position: relative;
overflow: hidden;
opacity: 0;
transform-origin: 90% 50%;
}
#index .row .rowMain .r_top .title span {
font-size: 0.36rem;
color: #000;
display: block;
}
#index .row .rowMain .r_top .title small {
font-size: 0.32rem;
color: #d9d9d9;
text-transform: uppercase;
text-shadow: 0px -1px 0px #9e9e9e;
font-family: En_bold;
}
#index .row .rowMain .r_top .title:after {
content: "";
width: 450px;
height: 1px;
background-color: rgba(0, 0, 0, 0.2);
bottom: 0;
right: 0;
position: absolute;
}
#index .row .rowMain .r_top .title.go {
transform: scale(1) translateY(0);
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
opacity: 1;
filter: blur(0px);
}
#index .r1 {
overflow: hidden!important;
}
#index .r1 .skew {
background-color: #fff;
}
#index .r1 .skew > img {
position: absolute;
bottom: -1.5rem;
left: 0;
transform-origin: 0% 100%;
}
#index .r1 .skew > img.go {
-webkit-animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
-o-animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: homebg 4s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
@keyframes homebg {
0% {
-webkit-transform: rotateZ(1deg) scaleY(0.9);
-moz-transform: rotateZ(1deg) scaleY(0.9);
-ms-transform: rotateZ(1deg) scaleY(0.9);
-o-transform: rotateZ(1deg) scaleY(0.9);
transform: rotateZ(1deg) scaleY(0.9);
}
100% {
-webkit-transform: rotate(0deg) scaleY(1);
-moz-transform: rotate(0deg) scaleY(1);
-ms-transform: rotate(0deg) scaleY(1);
-o-transform: rotate(0deg) scaleY(1);
transform: rotate(0deg) scaleY(1);
}
}
#index .r1 .r_center {
position: relative;
margin: 80px 0 30px 0;
}
#index .r1 .r_center .picBox {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 48%;
box-shadow: 0 17px 54px rgba(0, 0, 0, 0.22);
}
#index .r1 .r_center .newItem {
width: 46%;
margin-left: 54%;
height: 550px;
}
#index .r1 .r_center .newItem > li {
overflow: hidden;
height: 65px;
cursor: pointer;
opacity: 0;
filter: blur(3px);
transform: scale(1.2) translateY(40px);
-webkit-transform: scale(1.2) translateY(40px);
-moz-transform: scale(1.2) translateY(40px);
-o-transform: scale(1.2) translateY(40px);
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#index .r1 .r_center .newItem > li span {
font-size: 0.18rem;
color: #545454;
display: block;
margin-bottom: 5px;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#index .r1 .r_center .newItem > li small {
font-size: 0.16rem;
color: #8c8c8c;
font-family: En_bold;
font-weight: 500;
opacity: 0.5;
}
#index .r1 .r_center .newItem > li .Tmsg {
font-size: 0.14rem;
color: #a6a6a6;
display: none;
line-height: 24px;
}
#index .r1 .r_center .newItem > li .active {
display: block;
}
#index .r1 .r_center .newItem > li:not(:last-child) {
margin-bottom: 36px;
}
#index .r1 .r_center .newItem > li:hover span {
color: #337aff;
}
#index .r1 .r_center .newItem > li.go {
transform: scale(1) translateY(0);
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
opacity: 1;
filter: blur(0px);
}
#index .r1 .r_btm {
margin: 30px 0;
padding: 30px 0;
}
#index .r1 .r_btm .btnBox {
position: relative;
height: 0.5rem;
box-sizing: content-box;
width: 2.2rem;
margin: 30px auto;
}
#index .r1 .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#index .r1 .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;
height: 0.5rem;
left: 0;
right: 0;
margin: auto;
background-color: #f0f4f7;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#index .r1 .r_btm .btnBox canvas {
z-index: 3!important;
background-color: #f0f4f7!important;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#index .r1 .r_btm .btnBox:hover > .btn {
color: #fff;
}
#index .r1 .r_btm .btnBox:hover:after {
box-shadow: 0 6px 24px -2px rgba(42, 105, 220, 0.31);
}
#index .r2 .skew {
overflow: hidden;
}
#index .r2 .skew .buleMask1 {
position: absolute;
width: 50%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#index .r2 .skew .buleMask2 {
mix-blend-mode: multiply;
transform-origin: 100% 50%;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
position: absolute;
width: 100%;
height: 100%;
right: 50%;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0,71,157,.7);
z-index: 10000;
}
#index .r2 .skew .picItem {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow: visible;
z-index: 999;
opacity: 0;
background-size: cover !important;
}
#index .r2 .skew .current {
opacity: 1;
z-index: 1000;
}
#index .r2 .skew .maskMove1 {
right: 0%;
transition: all 0.3s ease-in-out;
}
#index .r2 .skew .maskMove2 {
-webkit-animation: maskmove 1s forwards ease-in-out;
animation: maskmove 1s forwards ease-in-out;
}
#index .r2 .skew .maskMove3 {
-webkit-animation: maskmove2 0.5s forwards ease-in-out;
animation: maskmove2 0.5s forwards ease-in-out;
}
@-webkit-keyframes maskmove {
0% {
right: 0;
height: 100%;
}
99% {
right: -100%;
height: 100%;
}
99.99% {
right: -100%;
height: 0%;
}
100% {
right: 100%;
height: 100%;
}
}
@keyframes maskmove {
0% {
right: 0;
height: 100%;
}
99% {
right: -100%;
height: 100%;
}
99.99% {
right: -100%;
height: 0%;
}
100% {
right: 100%;
height: 100%;
}
}
@-webkit-keyframes maskmove2 {
0% {
right: 100%;
height: 100%;
}
100% {
right: 50%;
height: 100%;
}
}
@keyframes maskmove2 {
0% {
right: 100%;
height: 100%;
}
100% {
right: 50%;
height: 100%;
}
}
#index .r2 .rowMain .half {
width:100%;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left:80px;
margin: auto;
height: 200px;
transform-origin: 50% 0%;
transform: scale(1.2) translateY(100px);
-webkit-transform: scale(1.2) translateY(100px);
-moz-transform: scale(1.2) translateY(100px);
-o-transform: scale(1.2) translateY(100px);
opacity: 0;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
filter: blur(3px);
}
#index .r2 .rowMain .half > div:nth-child(1) h4 {
display: none;
position: relative;
line-height: 54px;
}
#index .r2 .rowMain .half > div:nth-child(1) h4 > span {
font-size: 40px;
color: #fff;
display: block;
transform-origin: 50% 0%;
text-transform: none;
filter: blur(3px);
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#index .r2 .rowMain .half > div:nth-child(1) h4 > small {
font-family: En_bold;
font-size: 0.32rem;
color: #fff;
display: inline-block;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
}
#index .r2 .rowMain .half > div:nth-child(1) h4:after {
content: '';
height: 1px;
width: 100%;
background-color: #fff;
opacity: 0.3;
bottom: -15px;
left: 0;
position: absolute;
}
#index .r2 .rowMain .half > div:nth-child(1) h4.show {
display: inline-block;
}
#index .r2 .rowMain .half > div:nth-child(1) h4.show > span {
font-size: 0.36rem;
color: #fff;
display: block;
filter: blur(0px);
}
#index .r2 .rowMain .half > div:nth-child(1) h4.show > small {
font-size: 0.18rem;
color: #fff;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px;
}
#index .r2 .rowMain .half .picMove {
height: 46px;
line-height: 46px;
margin: 25px 0 0 0;
}
#index .r2 .rowMain .half .picMove > a {
display: inline-block;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: transparent;
line-height: 46px;
text-align: center;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
color: #fff;
vertical-align: top;
}
#index .r2 .rowMain .half .picMove > a:hover {
background-color: #262626;
}
#index .r2 .rowMain .half .picMove .active {
background-color: #262626;
}
#index .r2 .rowMain .half p {
font-size: 0.2rem;
color: #fff;
line-height: 200%;
position: relative;
display: none;
transition: all 0.5s ease;
}
#index .r2 .rowMain .half p:after {
content: "";
position: absolute;
height: 1px;
width: 120%;
left: 0;
bottom: -10px;
background-color: #fff;
}
#index .r2 .rowMain .half p.show {
display: inline-block;
-webkit-animation: pmove 1.2s forwards ease-in-out;
animation: pmove 1.2s forwards ease-in-out;
}
@keyframes pmove {
0% {
opacity: 0;
transform-origin: 50% 0%;
filter: blur(3px);
transform: scale(1.2) translateY(100px);
-webkit-transform: scale(1.2) translateY(100px);
-moz-transform: scale(1.2) translateY(100px);
-o-transform: scale(1.2) translateY(100px);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
filter: blur(0px);
transform: scale(1) translateY(0px);
-webkit-transform: scale(1) translateY(0px);
-moz-transform: scale(1) translateY(0px);
-o-transform: scale(1) translateY(0px);
}
}
#index .r2 .rowMain .half.go {
transform: scale(1) translateY(0);
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
opacity: 1;
filter: blur(0px);
}
#index .r3 #scene {
width: 100%;
height: 500px;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
}
#index .r3 .canvas-box {
width: 100%;
height: 500px;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
}
#index .r3 .r_center {
position: relative;
}
#index .r3 .r_center #cv {
position: absolute;
z-index: 1001;
top: 0;
left: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
}
#index .r3 .r_center .proItem {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0.7rem 0 0.3rem 0;
position: relative;
z-index: 1005;
}
#index .r3 .r_center .proItem > .proList {
padding-top: 45px;
position: relative;
min-width: 1.6rem;
cursor: pointer;
}
#index .r3 .r_center .proItem > .proList:after {
content: attr(data-name);
position: absolute;
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
left: 19px;
font-size: 0.2rem;
font-weight: bold;
color: #333;
}
#index .r3 .r_center .proItem > .proList > li {
padding-left: 20px;
font-size: 0.14rem;
position: relative;
height: 0.25rem;
line-height: 0.25rem;
color: #999;
}
#index .r3 .r_center .proItem > .proList > li > a {
display: inline-block;
width: 100%;
font-size: 0.14rem;
color: #999;
height: 0.25rem;
line-height: 0.25rem;
}
#index .r3 .r_center .proItem > .proList > li > a:hover {
color: #337aff;
}
#index .r3 .r_center .proItem > .proList > li:after {
content: '';
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
left: 4px;
top: 10px;
background-color: #337aff;
}
#index .r3 .r_center .proItem > .proList:hover:after {
color: #337aff;
}
#index .r3 .r_center .proItem .proList.active:after {
color: #337aff;
}
#index .r3 .r_center .imgBox {
margin: 0.6rem 0 0rem 0;
}
#index .r3 .r_center .imgBox .carItem > li {
text-align: center;
position: relative;
min-height: 400px;
}
#index .r3 .r_center .imgBox .carItem > li .carMask0 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: visible;
opacity: 1;
}
#index .r3 .r_center .imgBox .carItem > li .carMask1 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#index .r3 .r_center .imgBox .carItem > li .carMask2 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#index .r3 .r_center .imgBox .carItem > li .carMask3 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#index .r3 .r_center .imgBox .carItem > li .carMask4 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_1 {
top: 32px;
left: -19px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_2 {
left: -30px;
top: 30px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen0.c1_2.active {
left: -80px;
top: 2px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_1 {
top: 61px;
left: -328px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_2 {
left: -345px;
top: 61px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen1.c1_2.active {
left: -418px;
top: 32px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_1 {
top: 24px;
left: -157px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_2 {
top: 25px;
left: -176px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen2.c1_2.active {
top: 0px;
left: -246px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_1 {
top: 24px;
left: -72px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_2 {
top: 24px;
left: -72px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen3.c1_2.active {
top: 0px;
left: -91px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_1 {
top: 82px;
left: 0px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_2 {
top: 82px;
left: 0px;
}
#index .r3 .r_center .imgBox .carItem > li .carscreen4.c1_2.active {
top: 82px;
left: 78px;
}
#index .r3 .r_center .imgBox .carItem > li .car {
display: none;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
}
#index .r3 .r_center .imgBox .carItem > li .car.show {
display: inline-block;
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
}
#index .r3 .r_center .imgBox .carItem > li .moveOut {
transform: rotateY(30deg) !important;
-webkit-transform: rotateY(30deg) !important;
-moz-transform: rotateY(30deg) !important;
-o-transform: rotateY(30deg) !important;
opacity: 0!important;
}
#index .r3 .r_center .imgBox .carItem > li .moveIn {
transform: rotateY(-30deg);
-webkit-transform: rotateY(-30deg);
-moz-transform: rotateY(-30deg);
-o-transform: rotateY(-30deg);
display: inline-block;
opacity: 0;
}
#contact .skew {
background-color: #fff;
}
#contact .row .r_top {
position: relative;
height: 0.6rem;
line-height: 0.6rem;
}
#contact .row .r_top .title {
float: right;
font-size: 0.2rem;
height: 0.6rem;
line-height: 0.6rem;
position: relative;
padding-left: 0.4rem;
font-weight: bold;
letter-spacing: 7px;
}
#contact .row .r_top .title:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
right: 0;
background-color: #2640bf;
}
#contact .row .r_center .Tbox .top {
font-size: 0.32rem;
font-weight: bold;
position: relative;
height: 0.8rem;
line-height: 0.8rem;
margin-bottom: 0.4rem;
}
#contact .row .r_center .Tbox.box1 .center {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
#contact .row .r_center .Tbox.box1 .center > ul.item {
padding-top: 0.5rem;
position: relative;
min-width: 3.4rem;
display: inline-block;
float: left;
margin-right: 2rem;
margin-bottom: 1rem;
}
#contact .row .r_center .Tbox.box1 .center > ul.item > li {
padding-left: 0.4rem;
font-size: 0.14rem;
height: 0.4rem;
line-height: 0.4rem;
position: relative;
}
#contact .row .r_center .Tbox.box1 .center > ul.item > li > b {
font-size: 0.14rem;
color: #262626;
}
#contact .row .r_center .Tbox.box1 .center > ul.item > li > i {
display: inline-block;
position: absolute;
font-size: 0.2rem;
left: 0;
top: 0;
color: #2640bf;
}
#contact .row .r_center .Tbox.box1 .center > ul.item:after {
content: attr(data-title);
position: absolute;
width: 100%;
top: 0;
left: 0.4rem;
font-size: 0.2rem;
font-weight: bold;
color: #545454;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#contact .row .r_center .Tbox.box1 .center > ul.item:before {
content: '';
position: absolute;
width: 100%;
top: 32px;
left: 0;
height: 1px;
background-color: #8e8e8e;
}
#contact .row .r_center .Tbox.box1 .center > ul.item.go:after {
left: 0;
}
#contact .row .r_center .Tbox.box2 .center ul.partTop {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0.8rem;
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li {
display: inline-block;
position: relative;
float: left;
width: 24%;
font-size: 0.2rem;
color: rgba(0, 0, 0, 0.5);
height: 0.6rem;
line-height: 0.7rem;
font-weight: bold;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
overflow: hidden;
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li .Sline {
position: absolute;
top: 0;
left: 0;
z-index: 2;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
fill: none;
stroke: #92989e;
pointer-events: none;
-webkit-transition: -webkit-transform 0.7s, stroke 0.7s, stroke-width 0.7s;
transition: transform 0.7s, stroke 0.7s, stroke-width 0.7s;
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li:hover {
color: #2640bf;
line-height: 0.5rem;
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li:hover .Sline {
stroke: #2640bf;
stroke-width: 2px;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li.on {
color: #2640bf;
line-height: 0.5rem;
}
#contact .row .r_center .Tbox.box2 .center ul.partTop > li.on .Sline {
stroke: #2640bf;
stroke-width: 2px;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
#contact .row .r_center .Tbox.box2 .center .part .cutList {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
display: none;
}
#contact .row .r_center .Tbox.box2 .center .part .cutList > li {
width: 50%;
display: inline-block;
float: left;
margin-bottom: 0.5rem;
}
#contact .row .r_center .Tbox.box2 .center .part .cutList > li > b {
font-size: 0.2rem;
display: inline-block;
margin-bottom: 0.1rem;
}
#contact .row .r_center .Tbox.box2 .center .part .cutList > li > a {
display: block;
padding-left: 0.3rem;
font-size: 0.14rem;
position: relative;
height: 0.3rem;
line-height: 0.3rem;
}
#contact .row .r_center .Tbox.box2 .center .part .cutList > li > a > i {
display: inline-block;
color: #2640bf;
font-size: 0.2rem;
position: absolute;
left: 0;
top: 0;
}
#contact .row .r_center .Tbox.box2 .center .part .cutList.on {
display: block;
}
#new .row .skew {
background-color: #fff;
}
#new .row .rowMain .r_top {
padding-top: 18px;
}
#new .row .rowMain .r_top .mNav {
display: flex;
justify-content: center;
align-items: center;
}
#new .row .rowMain .r_top .mNav > li.skewBox {
position: relative;
box-sizing: content-box;
min-width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
padding: 0.2rem 0.2rem;
padding: 0.1rem 0;
}
#new .row .rowMain .r_top .mNav > li.skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#new .row .rowMain .r_top .mNav > li.skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0deg);
-webkit-transform: skew(-8deg, 0deg);
-moz-transform: skew(-8deg, 0deg);
-o-transform: skew(-8deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .row .rowMain .r_top .mNav > li.skewBox > a {
font-size: 0.16rem;
color: #a8a8a8;
}
#new .row .rowMain .r_top .mNav li.active > a {
color: #fff!important;
font-weight: bolder;
}
#new .row .rowMain .r_top .mNav li.active:after {
background-color: #2740bf!important;
box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28);
transform-origin: 50% 50%;
transform: skew(-8deg, 0) scaleY(1.2);
-webkit-transform: skew(-8deg, 0) scaleY(1.2);
-moz-transform: skew(-8deg, 0) scaleY(1.2);
-o-transform: skew(-8deg, 0) scaleY(1.2);
}
#new .row .rowMain .r_top .comBox {
margin: 1rem 0 1.8rem 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#new .row .rowMain .r_top .comBox .dateBox {
width: 480px;
display: inline-block;
}
#new .row .rowMain .r_top .comBox .dateBox > span {
font-size: 0.16rem;
display: inline-block;
float: left;
height: 0.5rem;
line-height: 0.5rem;
margin: 0 0.2rem;
}
#new .row .rowMain .r_top .comBox .dateBox .skewBox {
display: inline-block;
float: left;
position: relative;
box-sizing: content-box;
min-width: 1.7rem;
height: 0.1rem;
line-height: 0.1rem;
padding: 0.2rem 0.2rem;
}
#new .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.1rem;
line-height: 0.1rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#new .row .rowMain .r_top .comBox .dateBox .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .row .rowMain .r_top .comBox .dateBox .skewBox > input {
background-color: transparent;
border: none;
width: 100%;
color: #959595;
font-size: 0.14rem;
height: 0.4rem;
line-height: 0.4rem;
position: absolute;
cursor: pointer;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding-right: 0.4rem;
z-index: 100;
}
#new .row .rowMain .r_top .comBox .dateBox .skewBox > i {
position: absolute;
right: 0.14rem;
top: 0;
bottom: 0;
margin: auto;
height: 0.26rem;
line-height: 0.26rem;
display: inline-block;
font-size: 0.26rem;
color: #a6a6a6;
z-index: 10;
}
#new .row .rowMain .r_top .title {
margin: 0.4rem 0;
margin-bottom: 1rem;
}
#new .row .rowMain .r_top .title > span {
display: inline-block;
font-size: 0.32rem;
color: #333;
font-weight: bold;
visibility: hidden;
animation-duration: 0.8s;
}
#new .row .rowMain .r_top .title > small {
font-size: 0.14rem;
display: block;
margin: 0.1rem 0;
color: #808080;
}
#new .row .rowMain .r_btm {
margin: 30px 0;
}
#new .row .rowMain .r_btm .btnBox {
position: relative;
height: 0.5rem;
padding: 30px 0;
box-sizing: content-box;
}
#new .row .rowMain .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
color: #333;
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#new .row .rowMain .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;
height: 0.5rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#new .r1 {
position: relative;
display: table;
width: 100%;
}
#new .r1 .newBox {
display: table-cell;
vertical-align: middle;
}
#new .r1 .newBox .title {
font-size: 0.28rem;
color: #fff;
font-weight: bold;
margin: auto;
margin-bottom: 0.4rem;
width: 68%;
}
#new .r1 .newBox > .Tbox {
width: 68%;
margin: auto;
}
#new .r1 .newBox > .Tbox .newMove {
position: relative;
width: 100%;
padding-right: 30%;
box-sizing: border-box;
}
#new .r1 .newBox > .Tbox .newMove > img {
width: 100%;
}
#new .r1 .newBox > .Tbox .newMove > .Tmsg {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 70%;
padding: 0.2rem;
left: 0;
}
#new .r1 .newBox > .Tbox .newMove > .Tmsg > h6 {
color: #ffffff;
margin-bottom: 0.16rem;
}
#new .r1 .newBox > .Tbox .newMove > .Tmsg > p {
font-size: 0.12rem;
color: rgba(255, 255, 255, 0.6);
line-height: 160%;
}
#new .r1 .newBox > .Tbox .newMove > .Tmsg > .date {
top: 0.2rem;
right: 0.2rem;
font-size: 0.14rem;
font-weight: bold;
color: #fff;
}
#new .r1 .newBox > .Tbox .newMove > .Tmsg > .date > i {
color: #fff;
font-size: 0.18rem;
}
#new .r1 .newBox > .Tbox .newMove > ul.videoItem {
width: 30%;
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
#new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList {
width: 88%;
position: relative;
display: inline-block;
float: right;
}
#new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tmsg {
font-size: 0.14rem;
color: #fff;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
height: 0.34rem;
line-height: 0.34rem;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
}
#new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tplay {
position: absolute;
height: 32px;
width: 32px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 32px;
text-align: center;
border: 2px solid #fff;
opacity: 0.8;
cursor: pointer;
}
#new .r1 .newBox > .Tbox .newMove > ul.videoItem > li.videoList .Tplay > i {
font-size: 0.2rem;
color: #fff;
display: inline-block;
}
#new .r1 .newBox > .Tbox .newSet {
height: 0.32rem;
text-align: center;
margin-top: 0.3rem;
}
#new .r1 .newBox > .Tbox .newSet > i {
color: #fff;
display: inline-block;
vertical-align: top;
height: 100%;
width: 0.32rem;
}
#new .r1 .newBox > .Tbox .newSet > span {
font-size: 0.15rem;
font-family: En_bold;
color: rgba(115, 133, 222, 0.7);
display: inline-block;
vertical-align: top;
height: 100%;
}
#new .r1 .newBox > .Tbox .newSet > span > b {
font-size: 0.2rem;
font-family: En_bold;
letter-spacing: 2px;
color: #fff;
}
#new .r2 .rowMain .r_top .title {
position: relative;
}
#new .r2 .rowMain .r_top .title .title_item {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 1.5rem;
top: 0;
height: 100%;
padding-left: 0.8rem;
}
#new .r2 .rowMain .r_top .title .title_item > i {
position: absolute;
display: inline-block;
font-size: 0.32rem;
left: 0.1rem;
top: 0;
bottom: 0;
margin: auto;
text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19);
}
#new .r2 .rowMain .r_top .hot {
position: absolute;
left: 2rem;
top: 0;
width: calc(100% - 3rem);
padding-left: 0.8rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
#new .r2 .rowMain .r_top .hot:after {
content: attr(data-msg);
position: absolute;
top: 15px;
left: 0;
font-size: 0.14rem;
color: #333333;
}
#new .r2 .rowMain .r_top .hot .skewBox {
position: relative;
box-sizing: content-box;
min-width: 0.6rem;
height: 0rem;
line-height: 0rem;
padding: 0.2rem 0.2rem;
display: inline-block;
float: left;
margin: 0.1rem 5px;
padding: 0.18rem 0.16rem;
}
#new .r2 .rowMain .r_top .hot .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0rem;
line-height: 0rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#new .r2 .rowMain .r_top .hot .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-13deg, 0);
-webkit-transform: skew(-13deg, 0);
-moz-transform: skew(-13deg, 0);
-o-transform: skew(-13deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r2 .rowMain .r_top .hot .skewBox > a {
color: #8198c2!important;
font-size: 0.14rem !important;
}
#new .r2 .rowMain .r_top .hot .skewBox:after {
background-color: #e8ebf0;
}
#new .r2 .rowMain .r_center .Tbox {
padding: 0.4rem 2.6rem 0.4rem 2.7rem ;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
cursor: pointer;
}
#new .r2 .rowMain .r_center .Tbox > img {
position: absolute;
width: 1.7rem;
bottom: 0;
top: 0;
left: 0.5rem;
margin: auto;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles {
margin-bottom: 0;
border: none;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles p {
height: 0.42rem;
overflow: hidden;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm {
padding: 10px 0 0 0;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox {
position: relative;
box-sizing: content-box;
min-width: 0.6rem;
height: 0rem;
line-height: 0rem;
padding: 0.2rem 0.2rem;
display: inline-block;
float: left;
margin: 0rem 5px;
padding: 0.18rem 0.16rem;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0rem;
line-height: 0rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-13deg, 0);
-webkit-transform: skew(-13deg, 0);
-moz-transform: skew(-13deg, 0);
-o-transform: skew(-13deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a {
color: #8198c2!important;
font-size: 0.14rem !important;
}
#new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox:after {
background-color: #e8ebf0;
}
#new .r2 .rowMain .r_center .Tbox .Tmsg {
width: 1.6rem;
height: 1.15rem;
bottom: 0;
top: 0;
right: 0.5rem;
margin: auto;
background-color: #f3f3f3;
padding: 0.2rem 0.32rem;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r2 .rowMain .r_center .Tbox .Tmsg > span {
text-align: center;
color: #b0b0b0;
font-family: En_light;
display: inline-block;
font-size: 0.14rem;
width: 100%;
height: 0.38rem;
line-height: 0.38rem;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
position: relative;
z-index: 10;
}
#new .r2 .rowMain .r_center .Tbox .Tmsg > span:first-child {
border-bottom: 1px solid #dcdcdc;
}
#new .r2 .rowMain .r_center .Tbox .Tmsg > span > i {
font-size: 0.18rem;
color: #b0b0b0;
display: inline-block;
vertical-align: top;
margin-right: 7px;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r2 .rowMain .r_center .Tbox .Tmsg:after {
content: '';
width: 1px;
height: 1px;
border-radius: 50%;
position: absolute;
top: 0.76rem;
left: 0.61rem;
margin: auto;
background-color: #b0b0b0;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
z-index: 2;
}
#new .r2 .rowMain .r_center .Tbox:hover {
box-shadow: 0 15px 16px -3px rgba(0, 0, 0, 0.08);
}
#new .r2 .rowMain .r_center .Tbox:hover .layout-title {
color: #2640bf;
}
#new .r2 .rowMain .r_center .Tbox:hover .Tmsg span {
color: #fff;
}
#new .r2 .rowMain .r_center .Tbox:hover .Tmsg span > i {
color: #fff;
}
#new .r2 .rowMain .r_center .Tbox:hover .Tmsg:after {
transform: scale(250);
-webkit-transform: scale(250);
-moz-transform: scale(250);
-o-transform: scale(250);
background-color: #2640bf;
}
#new .r3 .skew {
background-color: #f0f4f7;
}
#new .r3 .rowMain .r_top .title {
position: relative;
}
#new .r3 .rowMain .r_top .title .title_item {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 1.5rem;
top: 0;
height: 100%;
padding-left: 0.8rem;
}
#new .r3 .rowMain .r_top .title .title_item > i {
position: absolute;
display: inline-block;
font-size: 0.32rem;
left: 0.1rem;
top: 0;
bottom: 0;
margin: auto;
text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19);
line-height: 100%;
}
#new .r3 .rowMain .r_top .title .title_item > li {
display: table;
float: left;
height: 100%;
padding: 0 12px;
margin: 0 12px;
position: relative;
z-index: 10;
visibility: hidden;
}
#new .r3 .rowMain .r_top .title .title_item > li > a {
font-size: 0.2rem;
display: table-cell;
vertical-align: middle;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
position: relative;
background-color: transparent;
z-index: 100;
}
#new .r3 .rowMain .r_top .title .title_item > li:after {
content: attr(data-num);
position: absolute;
color: #cbccce;
font-size: 0.4rem;
font-family: En_bold;
z-index: -1;
left: 0;
right: 0;
margin: auto;
width: 0.5rem;
top: -0.64rem;
letter-spacing: 20px;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
filter: blur(5px);
opacity: 0;
transform-origin: 50% 50%;
}
#new .r3 .rowMain .r_top .title .title_item > li:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r3 .rowMain .r_top .title .title_item > li.active > a,
#new .r3 .rowMain .r_top .title .title_item > li:hover > a {
color: #fff;
background-color: #2640bf;
}
#new .r3 .rowMain .r_top .title .title_item > li.active:before,
#new .r3 .rowMain .r_top .title .title_item > li:hover:before {
background-color: #2640bf;
}
#new .r3 .rowMain .r_top .title .title_item > li.active:after,
#new .r3 .rowMain .r_top .title .title_item > li:hover:after {
top: -0.32rem;
letter-spacing: 2px;
filter: blur(0px);
opacity: 1;
}
#new .r3 .rowMain .r_center {
position: relative;
}
#new .r3 .rowMain .r_center .prolist1 {
width: 100%;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li {
display: inline-block;
float: left;
margin: 0 0.12rem;
width: 22%;
margin-bottom: 0.24rem;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox {
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.46);
position: relative;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book{
position: relative;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg{
position: absolute;
bottom: -0.6rem;
left: 0;
background-color: #184156;
height: 0.6rem;
line-height: 0.6rem;
width: 100%;
z-index: 1;
transition: all 0.8s cubic-bezier(0.76, 0.01, 0.05, 1.56);
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:hover > .Tmsg{
bottom: 0;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span{
display: inline-block;
position: relative;
height: 0.6rem;
line-height: 0.6rem;
color: #fff;
font-size: 0.15rem;
width: 50%;
float: left;
text-align: center;
cursor: pointer;
z-index: 3;
overflow: hidden;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span:after{
content: '';
width: 1px;
height: 1px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
background-color: transparent;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
transform-origin: 50% 50%;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
z-index: -1;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span:hover:after{
transform: scale(200);
-webkit-transform: scale(200);
-moz-transform: scale(200);
-o-transform: scale(200);
background-color: #2640bf;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book > .Tmsg > span > i{
margin-right: 8px;
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
color: #fff;
font-size: 0.18rem;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:after{
content: '';
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
background-color: rgba(0, 0, 0, 0.5);
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .book:hover:after{
height: 100%;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox:hover {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox:hover .date {
background-color: #2640bf;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
height: 0.3rem;
line-height: 0.3rem;
width: 100%;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span {
color: #fff;
padding: 0 0.1rem;
font-size: 0.12rem;
display: inline-block;
vertical-align: middle;
height: 100%;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span > i {
display: inline-block;
vertical-align: middle;
margin-left: 4px;
font-size: 0.14rem;
color: #fff;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li .picBox .date > span:last-child {
float: right;
}
#new .r3 .rowMain .r_center .prolist1 ul.myVideo > li > .Tmsg {
color: #333;
font-size: 0.14rem;
margin-top: 0.15rem;
}
#new .r4 .skew {
background-color: #fff;
}
#new .r4 .rowMain {
overflow: visible!important;
}
#new .r4 .rowMain .r_top .title {
position: relative;
}
#new .r4 .rowMain .r_top .title .title_item {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 1.5rem;
top: 0;
height: 100%;
padding-left: 0.8rem;
}
#new .r4 .rowMain .r_top .title .title_item > i {
position: absolute;
display: inline-block;
font-size: 0.32rem;
left: 0.1rem;
top: 0;
bottom: 0;
margin: auto;
text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19);
line-height: 100%;
}
#new .r4 .rowMain .r_top .title .title_item > li {
display: table;
float: left;
height: 100%;
padding: 0 12px;
margin: 0 12px;
position: relative;
z-index: 10;
visibility: hidden;
}
#new .r4 .rowMain .r_top .title .title_item > li > a {
font-size: 0.2rem;
display: table-cell;
vertical-align: middle;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
position: relative;
background-color: transparent;
z-index: 100;
}
#new .r4 .rowMain .r_top .title .title_item > li:after {
content: attr(data-num);
position: absolute;
color: #cbccce;
font-size: 0.4rem;
font-family: En_bold;
z-index: -1;
left: 0;
right: 0;
margin: auto;
width: 0.5rem;
top: -0.64rem;
letter-spacing: 20px;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
filter: blur(5px);
opacity: 0;
transform-origin: 50% 50%;
}
#new .r4 .rowMain .r_top .title .title_item > li:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new .r4 .rowMain .r_top .title .title_item > li.active > a,
#new .r4 .rowMain .r_top .title .title_item > li:hover > a {
color: #fff;
background-color: #2640bf;
}
#new .r4 .rowMain .r_top .title .title_item > li.active:before,
#new .r4 .rowMain .r_top .title .title_item > li:hover:before {
background-color: #2640bf;
}
#new .r4 .rowMain .r_top .title .title_item > li.active:after,
#new .r4 .rowMain .r_top .title .title_item > li:hover:after {
top: -0.32rem;
letter-spacing: 2px;
filter: blur(0px);
opacity: 1;
}
#new .r4 .rowMain .r_center {
position: relative;
}
#new .r4 .rowMain .r_center .component {
width: 100%;
height: auto;
}
#new .r4 .rowMain .r_center .component .itemwrap {
height: 450px;
width: 100%;
max-width: 12rem;
}
#new .r4 .rowMain .r_center .component .itemwrap > li {
display: flex;
justify-content: space-around;
align-items: center;
height: auto;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book {
display: inline-block;
float: left;
position: relative;
width: 3.2rem;
margin: auto 2%;
box-shadow: 0 15px 60px -10px rgba(0, 0, 0, 0.6);
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book > img {
width: 100%;
height: 100%;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book:hover:after {
height: 100%;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book:hover .Tmsg {
bottom: 0;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book:after {
content: '';
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
background-color: rgba(0, 0, 0, 0.5);
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg {
position: absolute;
bottom: -0.6rem;
left: 0;
background-color: #184156;
height: 0.6rem;
line-height: 0.6rem;
width: 100%;
z-index: 1;
transition: all 0.8s cubic-bezier(0.76, 0.01, 0.05, 1.56);
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span {
display: inline-block;
position: relative;
height: 0.6rem;
line-height: 0.6rem;
color: #fff;
font-size: 0.15rem;
width: 50%;
float: left;
text-align: center;
cursor: pointer;
z-index: 3;
overflow: hidden;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span:after {
content: '';
width: 1px;
height: 1px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: auto;
background-color: transparent;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
transform-origin: 50% 50%;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
z-index: -1;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span:hover:after {
transform: scale(200);
-webkit-transform: scale(200);
-moz-transform: scale(200);
-o-transform: scale(200);
background-color: #2640bf;
}
#new .r4 .rowMain .r_center .component .itemwrap > li > .book .Tmsg > span > i {
margin-right: 8px;
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
color: #fff;
font-size: 0.18rem;
}
#new .r4 .rowMain .r_center .component nav {
height: 0.32rem;
text-align: center;
margin-top: 0.8rem;
}
#new .r4 .rowMain .r_center .component nav > i {
color: #b2b2b2;
display: inline-block;
vertical-align: top;
height: 100%;
line-height: 0.32rem;
width: 0.4rem;
text-align: center;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
cursor: pointer;
font-size: 0.18rem;
}
#new .r4 .rowMain .r_center .component nav > i:hover {
color: #000;
}
#new .r4 .rowMain .r_center .component nav > span {
font-size: 0.2rem;
font-family: En_bold;
color: #8d8d8d;
display: inline-block;
vertical-align: top;
height: 100%;
}
#new .r4 .rowMain .r_center .component nav > span > b {
font-size: 0.3rem;
font-family: En_bold;
letter-spacing: 2px;
color: #2640bf;
}
#new_detail .r1 .skew {
background-color: #f0f4f7;
}
#new_detail .r1 .rowMain {
overflow: visible!important;
padding-top: 0.5rem!important;
padding-bottom: 1.3rem!important;
}
#new_detail .r1 .rowMain .Tbox {
position: relative;
padding: 1rem 0;
padding-right: 25%;
transform: translateY(-1.5rem);
-webkit-transform: translateY(-1.5rem);
-moz-transform: translateY(-1.5rem);
-o-transform: translateY(-1.5rem);
}
#new_detail .r1 .rowMain .Tbox:after {
content: '';
position: absolute;
width: 75%;
height: 100%;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
background-color: #fff;
z-index: -1;
top: 0;
}
#new_detail .r1 .rowMain .Tbox .articles {
padding: 0 6%;
}
#new_detail .r1 .rowMain .Tbox .articles > h5 {
font-size: 0.32rem;
font-weight: bold;
margin-bottom: 0.1rem;
text-align: center;
}
#new_detail .r1 .rowMain .Tbox .articles small {
height: 0.5rem;
line-height: 0.5rem;
display: block;
width: 2.5rem;
margin: auto;
margin-bottom: 0.3rem;
}
#new_detail .r1 .rowMain .Tbox .articles small > span {
color: #646464;
padding: 0 0.1rem;
font-size: 0.12rem;
display: inline-block;
vertical-align: middle;
height: 100%;
height: 0.5rem;
line-height: 0.5rem;
font-family: En_bold;
float: left;
text-align: center;
}
#new_detail .r1 .rowMain .Tbox .articles small > span > i {
display: inline-block;
margin-right: 6px;
margin-left: 4px;
font-size: 0.18rem;
vertical-align: sub;
color: #646464;
height: 0.5rem;
line-height: 0.5rem;
}
#new_detail .r1 .rowMain .Tbox .articles small > span:last-child {
float: right;
}
#new_detail .r1 .rowMain .Tbox .articles .dot {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 60%;
margin: auto;
}
#new_detail .r1 .rowMain .Tbox .articles .dot .skewBox {
position: relative;
box-sizing: content-box;
min-width: 0.6rem;
height: 0rem;
line-height: 0rem;
padding: 0.2rem 0.2rem;
display: inline-block;
float: left;
margin: 0.05rem 5px;
padding: 0.18rem 0.16rem;
z-index: 2;
}
#new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0rem;
line-height: 0rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#new_detail .r1 .rowMain .Tbox .articles .dot .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-13deg, 0);
-webkit-transform: skew(-13deg, 0);
-moz-transform: skew(-13deg, 0);
-o-transform: skew(-13deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a {
color: #8198c2!important;
font-size: 0.14rem !important;
}
#new_detail .r1 .rowMain .Tbox .articles .dot .skewBox:after {
background-color: #e8ebf0;
}
#new_detail .r1 .rowMain .Tbox .articles .Tmsg {
margin-top: 0.5rem;
}
#new_detail .r1 .rowMain .Tbox .articles .Tmsg img {
width: 90%;
margin: 0.24rem auto 0.24rem auto;
display: block;
}
#new_detail .r1 .rowMain .Tbox .articles .Tmsg p {
margin: 0.2rem 0;
}
#new_detail .r1 .rowMain .Tbox .cor {
right: 0;
padding: 0.4rem 0.2rem;
width: 25%;
top: 0;
z-index: 2;
}
#new_detail .r1 .rowMain .Tbox .cor:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: skew(0, -2.4deg);
-webkit-transform: skew(0, -2.4deg);
-moz-transform: skew(0, -2.4deg);
-o-transform: skew(0, -2.4deg);
background-color: #2640bf;
z-index: -1;
top: 0.33rem;
left: 0;
}
#new_detail .r1 .rowMain .Tbox .cor .top {
font-size: 0.2rem;
font-weight: bold;
color: #fff;
margin: 0.4rem 0 0.3rem 0;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist {
margin-bottom: 0.3rem;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small {
height: 0.2rem;
line-height: 0.2rem;
display: block;
width: 1.3rem;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span {
color: #fff;
opacity: 0.5;
font-size: 0.12rem;
display: inline-block;
vertical-align: middle;
height: 100%;
height: 0.2rem;
line-height: 0.2rem;
font-family: En_bold;
float: left;
text-align: left;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span > i {
display: inline-block;
margin-right: 6px;
margin-left: 4px;
font-size: 0.18rem;
vertical-align: sub;
color: #fff;
height: 0.2rem;
line-height: 0.2rem;
opacity: 0.5;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist .Tmsg small > span:last-child {
float: right;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a {
color: #fff;
display: block;
font-size: 0.14rem;
width: 100%;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
padding-bottom: 0.16rem;
height: 0.3rem;
line-height: 0.4rem;
box-sizing: content-box;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a .Sline {
stroke-width: 2px;
stroke: rgba(255, 255, 255, 0.4);
}
#new_detail .r1 .rowMain .Tbox .cor .center .component .itemwrap > li .newlist > a:hover {
line-height: 0.32rem;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component nav {
height: 0.32rem;
text-align: center;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component nav > i {
color: rgba(255, 255, 255, 0.5);
display: inline-block;
vertical-align: top;
height: 100%;
line-height: 0.32rem;
width: 0.4rem;
text-align: center;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
cursor: pointer;
font-size: 0.18rem;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component nav > i:hover {
color: #fff;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component nav > span {
font-size: 0.16rem;
font-family: En_bold;
color: rgba(255, 255, 255, 0.5);
display: inline-block;
vertical-align: top;
height: 100%;
}
#new_detail .r1 .rowMain .Tbox .cor .center .component nav > span > b {
font-size: 0.2rem;
font-family: En_bold;
letter-spacing: 2px;
color: #fff;
}
#new_detail .r1 .rowMain .Tbox .cor .btm {
position: absolute;
top: 100%;
width: 100%;
left: 0;
}
#new_detail .r1 .rowMain .Tbox .cor .btm .return {
color: #fff;
font-size: 0.18rem;
display: inline-block;
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
position: relative;
z-index: 5;
font-weight: bold;
text-align: center;
}
#new_detail .r1 .rowMain .Tbox .cor .btm .return:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: skew(0, -2.4deg);
-webkit-transform: skew(0, -2.4deg);
-moz-transform: skew(0, -2.4deg);
-o-transform: skew(0, -2.4deg);
background-color: #a9aebb;
z-index: -1;
top: 0;
left: 0;
}
#new_detail .r1 .rowMain .Tbox .change {
width: 75%;
text-align: center;
}
#new_detail .r1 .rowMain .Tbox .change .pageSet {
background-color: #8f8f8f;
display: inline-block;
width: 1.2rem;
height: 0.6rem;
line-height: 0.6rem;
}
#new_detail .r1 .rowMain .Tbox .change .pageSet > span {
color: #fff;
font-size: 0.14rem;
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
width: 100%;
}
#new_detail .r1 .rowMain .Tbox .change .pageSet > span > i {
color: #fff;
font-size: 0.18rem;
margin: 0 0.1rem;
vertical-align: sub;
}
#baogao .row .rowMain,
#gonggao .row .rowMain,
#zhili .row .rowMain {
padding: 0px 5%;
z-index: 2000;
padding-bottom: 36px;
}
#baogao .row .rowMain .r_top,
#gonggao .row .rowMain .r_top,
#zhili .row .rowMain .r_top {
padding-top: 18px;
}
#baogao .row .rowMain .r_top .mNav,
#gonggao .row .rowMain .r_top .mNav,
#zhili .row .rowMain .r_top .mNav {
display: flex;
justify-content: center;
align-items: center;
}
#baogao .row .rowMain .r_top .mNav > li.skewBox,
#gonggao .row .rowMain .r_top .mNav > li.skewBox,
#zhili .row .rowMain .r_top .mNav > li.skewBox {
position: relative;
box-sizing: content-box;
min-width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
padding: 0.2rem 0.2rem;
padding: 0.1rem 0;
}
#baogao .row .rowMain .r_top .mNav > li.skewBox > a.Tcon,
#gonggao .row .rowMain .r_top .mNav > li.skewBox > a.Tcon,
#zhili .row .rowMain .r_top .mNav > li.skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#baogao .row .rowMain .r_top .mNav > li.skewBox:after,
#gonggao .row .rowMain .r_top .mNav > li.skewBox:after,
#zhili .row .rowMain .r_top .mNav > li.skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0deg);
-webkit-transform: skew(-8deg, 0deg);
-moz-transform: skew(-8deg, 0deg);
-o-transform: skew(-8deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .row .rowMain .r_top .mNav > li.skewBox > a,
#gonggao .row .rowMain .r_top .mNav > li.skewBox > a,
#zhili .row .rowMain .r_top .mNav > li.skewBox > a {
font-size: 0.16rem;
color: #a8a8a8;
}
#baogao .row .rowMain .r_top .mNav li.active > a,
#gonggao .row .rowMain .r_top .mNav li.active > a,
#zhili .row .rowMain .r_top .mNav li.active > a {
color: #fff!important;
font-weight: bolder;
}
#baogao .row .rowMain .r_top .mNav li.active:after,
#gonggao .row .rowMain .r_top .mNav li.active:after,
#zhili .row .rowMain .r_top .mNav li.active:after {
background-color: #2740bf!important;
box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28);
transform-origin: 50% 50%;
transform: skew(-8deg, 0) scaleY(1.2);
-webkit-transform: skew(-8deg, 0) scaleY(1.2);
-moz-transform: skew(-8deg, 0) scaleY(1.2);
-o-transform: skew(-8deg, 0) scaleY(1.2);
}
#baogao .row .rowMain .r_top .comBox,
#gonggao .row .rowMain .r_top .comBox,
#zhili .row .rowMain .r_top .comBox {
margin: 1rem 0 1.8rem 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#baogao .row .rowMain .r_top .comBox .dateBox,
#gonggao .row .rowMain .r_top .comBox .dateBox,
#zhili .row .rowMain .r_top .comBox .dateBox {
width: 480px;
display: inline-block;
}
#baogao .row .rowMain .r_top .comBox .dateBox > span,
#gonggao .row .rowMain .r_top .comBox .dateBox > span,
#zhili .row .rowMain .r_top .comBox .dateBox > span {
font-size: 0.16rem;
display: inline-block;
float: left;
height: 0.5rem;
line-height: 0.5rem;
margin: 0 0.2rem;
}
#baogao .row .rowMain .r_top .comBox .dateBox .skewBox,
#gonggao .row .rowMain .r_top .comBox .dateBox .skewBox,
#zhili .row .rowMain .r_top .comBox .dateBox .skewBox {
display: inline-block;
float: left;
position: relative;
box-sizing: content-box;
min-width: 1.7rem;
height: 0.1rem;
line-height: 0.1rem;
padding: 0.2rem 0.2rem;
}
#baogao .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon,
#gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon,
#zhili .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.1rem;
line-height: 0.1rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#baogao .row .rowMain .r_top .comBox .dateBox .skewBox:after,
#gonggao .row .rowMain .r_top .comBox .dateBox .skewBox:after,
#zhili .row .rowMain .r_top .comBox .dateBox .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .row .rowMain .r_top .comBox .dateBox .skewBox > input,
#gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > input,
#zhili .row .rowMain .r_top .comBox .dateBox .skewBox > input {
background-color: transparent;
border: none;
width: 100%;
color: #959595;
font-size: 0.14rem;
height: 0.4rem;
line-height: 0.4rem;
position: absolute;
cursor: pointer;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding-right: 0.4rem;
z-index: 100;
}
#baogao .row .rowMain .r_top .comBox .dateBox .skewBox > i,
#gonggao .row .rowMain .r_top .comBox .dateBox .skewBox > i,
#zhili .row .rowMain .r_top .comBox .dateBox .skewBox > i {
position: absolute;
right: 0.14rem;
top: 0;
bottom: 0;
margin: auto;
height: 0.26rem;
line-height: 0.26rem;
display: inline-block;
font-size: 0.26rem;
color: #a6a6a6;
z-index: 10;
}
#baogao .row .rowMain .r_top .title,
#gonggao .row .rowMain .r_top .title,
#zhili .row .rowMain .r_top .title {
font-size: 0.32rem;
color: #333;
font-weight: bold;
margin: 0.8rem 0;
}
#baogao .row .rowMain .r_btm,
#gonggao .row .rowMain .r_btm,
#zhili .row .rowMain .r_btm {
margin: 30px 0;
}
#baogao .row .rowMain .r_btm .btnBox,
#gonggao .row .rowMain .r_btm .btnBox,
#zhili .row .rowMain .r_btm .btnBox {
position: relative;
height: 0.5rem;
padding: 30px 0;
box-sizing: content-box;
}
#baogao .row .rowMain .r_btm .btnBox > .btn,
#gonggao .row .rowMain .r_btm .btnBox > .btn,
#zhili .row .rowMain .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
color: #333;
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#baogao .row .rowMain .r_btm .btnBox:after,
#gonggao .row .rowMain .r_btm .btnBox:after,
#zhili .row .rowMain .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;
height: 0.5rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#baogao .r1 .skew,
#gonggao .r1 .skew,
#zhili .r1 .skew,
#baogao .r2 .skew,
#gonggao .r2 .skew,
#zhili .r2 .skew {
background-color: #f0f4f7;
}
#baogao .r1 .r_center > ul,
#gonggao .r1 .r_center > ul,
#zhili .r1 .r_center > ul,
#baogao .r2 .r_center > ul,
#gonggao .r2 .r_center > ul,
#zhili .r2 .r_center > ul {
width: 100%;
padding: 0.3rem 0;
overflow: hidden;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
#baogao .r1 .r_center > ul li,
#gonggao .r1 .r_center > ul li,
#zhili .r1 .r_center > ul li,
#baogao .r2 .r_center > ul li,
#gonggao .r2 .r_center > ul li,
#zhili .r2 .r_center > ul li {
display: inline-block;
float: left;
box-sizing: content-box;
min-width: 35%;
height: 0.8rem;
line-height: 0.8rem;
padding: 0.2rem 0.2rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
position: relative;
cursor: pointer;
margin-bottom: 0.7rem;
width: 2rem;
}
#baogao .r1 .r_center > ul li > a.Tcon,
#gonggao .r1 .r_center > ul li > a.Tcon,
#zhili .r1 .r_center > ul li > a.Tcon,
#baogao .r2 .r_center > ul li > a.Tcon,
#gonggao .r2 .r_center > ul li > a.Tcon,
#zhili .r2 .r_center > ul li > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.8rem;
line-height: 0.8rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#baogao .r1 .r_center > ul li:after,
#gonggao .r1 .r_center > ul li:after,
#zhili .r1 .r_center > ul li:after,
#baogao .r2 .r_center > ul li:after,
#gonggao .r2 .r_center > ul li:after,
#zhili .r2 .r_center > ul li:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(0deg, -3deg);
-webkit-transform: skew(0deg, -3deg);
-moz-transform: skew(0deg, -3deg);
-o-transform: skew(0deg, -3deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li > i,
#gonggao .r1 .r_center > ul li > i,
#zhili .r1 .r_center > ul li > i,
#baogao .r2 .r_center > ul li > i,
#gonggao .r2 .r_center > ul li > i,
#zhili .r2 .r_center > ul li > i {
vertical-align: 0.25rem;
color: #eb062b;
font-size: 0.3rem;
margin-right: 0.24rem;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li span,
#gonggao .r1 .r_center > ul li span,
#zhili .r1 .r_center > ul li span,
#baogao .r2 .r_center > ul li span,
#gonggao .r2 .r_center > ul li span,
#zhili .r2 .r_center > ul li span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: super!important;
height: 68%;
vertical-align: 0.2rem;
line-height: 0.25rem;
width: 70%;
font-size: 0.16rem;
color: #333;
font-weight: bold;
display: inline-block;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li span > small,
#gonggao .r1 .r_center > ul li span > small,
#zhili .r1 .r_center > ul li span > small,
#baogao .r2 .r_center > ul li span > small,
#gonggao .r2 .r_center > ul li span > small,
#zhili .r2 .r_center > ul li span > small {
font-size: 0.13rem;
font-weight: 500;
display: block;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li a.downLoad,
#gonggao .r1 .r_center > ul li a.downLoad,
#zhili .r1 .r_center > ul li a.downLoad,
#baogao .r2 .r_center > ul li a.downLoad,
#gonggao .r2 .r_center > ul li a.downLoad,
#zhili .r2 .r_center > ul li a.downLoad {
position: absolute;
display: inline-block;
right: 0.3rem;
top: 0.15rem;
bottom: 0;
margin: auto;
height: 50%;
font-size: 0.12rem;
line-height: 0.25rem;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li a.downLoad > i,
#gonggao .r1 .r_center > ul li a.downLoad > i,
#zhili .r1 .r_center > ul li a.downLoad > i,
#baogao .r2 .r_center > ul li a.downLoad > i,
#gonggao .r2 .r_center > ul li a.downLoad > i,
#zhili .r2 .r_center > ul li a.downLoad > i {
font-size: 0.25rem;
color: #484848;
font-weight: bold;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#baogao .r1 .r_center > ul li:hover > i,
#gonggao .r1 .r_center > ul li:hover > i,
#zhili .r1 .r_center > ul li:hover > i,
#baogao .r2 .r_center > ul li:hover > i,
#gonggao .r2 .r_center > ul li:hover > i,
#zhili .r2 .r_center > ul li:hover > i {
color: #fff;
}
#baogao .r1 .r_center > ul li:hover span,
#gonggao .r1 .r_center > ul li:hover span,
#zhili .r1 .r_center > ul li:hover span,
#baogao .r2 .r_center > ul li:hover span,
#gonggao .r2 .r_center > ul li:hover span,
#zhili .r2 .r_center > ul li:hover span {
color: #fff;
}
#baogao .r1 .r_center > ul li:hover span > small,
#gonggao .r1 .r_center > ul li:hover span > small,
#zhili .r1 .r_center > ul li:hover span > small,
#baogao .r2 .r_center > ul li:hover span > small,
#gonggao .r2 .r_center > ul li:hover span > small,
#zhili .r2 .r_center > ul li:hover span > small {
color: #fff;
}
#baogao .r1 .r_center > ul li:hover a.downLoad,
#gonggao .r1 .r_center > ul li:hover a.downLoad,
#zhili .r1 .r_center > ul li:hover a.downLoad,
#baogao .r2 .r_center > ul li:hover a.downLoad,
#gonggao .r2 .r_center > ul li:hover a.downLoad,
#zhili .r2 .r_center > ul li:hover a.downLoad {
color: #fff;
}
#baogao .r1 .r_center > ul li:hover a.downLoad > i,
#gonggao .r1 .r_center > ul li:hover a.downLoad > i,
#zhili .r1 .r_center > ul li:hover a.downLoad > i,
#baogao .r2 .r_center > ul li:hover a.downLoad > i,
#gonggao .r2 .r_center > ul li:hover a.downLoad > i,
#zhili .r2 .r_center > ul li:hover a.downLoad > i {
color: #fff;
}
#baogao .r1 .r_center > ul li:hover:after,
#gonggao .r1 .r_center > ul li:hover:after,
#zhili .r1 .r_center > ul li:hover:after,
#baogao .r2 .r_center > ul li:hover:after,
#gonggao .r2 .r_center > ul li:hover:after,
#zhili .r2 .r_center > ul li:hover:after {
background-color: #2740bf!important;
box-shadow: 0 5px 20px -2px rgba(0, 0, 0, 0.19);
}
#baogao .r2 .r_center > ul > li:after,
#gonggao .r2 .r_center > ul > li:after,
#zhili .r2 .r_center > ul > li:after {
background-color: #fbfbfb!important;
}
#baogao .r3 .r_center > ul,
#gonggao .r3 .r_center > ul,
#zhili .r3 .r_center > ul {
width: 100%;
padding: 0.3rem 0;
overflow: hidden;
display: flex;
padding-bottom: 0.6rem;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
#baogao .r3 .r_center > ul > li,
#gonggao .r3 .r_center > ul > li,
#zhili .r3 .r_center > ul > li {
display: inline-block;
float: left;
position: relative;
cursor: pointer;
}
#baogao .r3 .r_center > ul > li .skewBox,
#gonggao .r3 .r_center > ul > li .skewBox,
#zhili .r3 .r_center > ul > li .skewBox {
transform: skew(0, -3deg) scale(0.9);
-webkit-transform: skew(0, -3deg) scale(0.9);
-moz-transform: skew(0, -3deg) scale(0.9);
-o-transform: skew(0, -3deg) scale(0.9);
display: block;
overflow: hidden;
}
#baogao .r3 .r_center > ul > li .skewBox > img,
#gonggao .r3 .r_center > ul > li .skewBox > img,
#zhili .r3 .r_center > ul > li .skewBox > img {
transform: skew(0, 3deg) scale(1.1);
-webkit-transform: skew(0, 3deg) scale(1.1);
-moz-transform: skew(0, 3deg) scale(1.1);
-o-transform: skew(0, 3deg) scale(1.1);
}
#baogao .r3 .r_center > ul > li:after,
#gonggao .r3 .r_center > ul > li:after,
#zhili .r3 .r_center > ul > li:after {
content: attr(data-title);
position: absolute;
left: 0;
right: 0;
margin: auto;
height: 0.3rem;
line-height: 0.3rem;
color: #333;
top: 108%;
font-size: 0.16rem;
font-weight: bold;
text-align: center;
}
/*产å“*/
#pro .row .skew {
background-color: #fff;
}
#pro .row .rowMain {
padding: 0px 5%;
z-index: 2000;
padding-bottom: 36px;
}
#pro .row .rowMain .Tlist1.pa {
visibility: hidden;
pointer-events: none;
display: none;
}
#pro .row .rowMain .r_top {
padding-top: 18px;
}
#pro .row .rowMain .r_top .mNav {
display: flex;
justify-content: center;
align-items: center;
}
#pro .row .rowMain .r_top .mNav > li.skewBox {
position: relative;
box-sizing: content-box;
min-width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
padding: 0.2rem 0.2rem;
padding: 0.1rem 0;
}
#pro .row .rowMain .r_top .mNav > li.skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#pro .row .rowMain .r_top .mNav > li.skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0deg);
-webkit-transform: skew(-8deg, 0deg);
-moz-transform: skew(-8deg, 0deg);
-o-transform: skew(-8deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .row .rowMain .r_top .mNav > li.skewBox > a {
font-size: 0.16rem;
color: #a8a8a8;
}
#pro .row .rowMain .r_top .mNav li.active > a {
color: #fff!important;
font-weight: bolder;
}
#pro .row .rowMain .r_top .mNav li.active:after {
background-color: #2740bf!important;
box-shadow: 0 10px 43px -3px rgba(39, 64, 191, 0.28);
transform-origin: 50% 50%;
transform: skew(-8deg, 0) scaleY(1.2);
-webkit-transform: skew(-8deg, 0) scaleY(1.2);
-moz-transform: skew(-8deg, 0) scaleY(1.2);
-o-transform: skew(-8deg, 0) scaleY(1.2);
}
#pro .row .rowMain .r_top .comBox {
margin: 1rem 0 1.8rem 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#pro .row .rowMain .r_top .comBox .dateBox {
width: 480px;
display: inline-block;
}
#pro .row .rowMain .r_top .comBox .dateBox > span {
font-size: 0.16rem;
display: inline-block;
float: left;
height: 0.5rem;
line-height: 0.5rem;
margin: 0 0.2rem;
}
#pro .row .rowMain .r_top .comBox .dateBox .skewBox {
display: inline-block;
float: left;
position: relative;
box-sizing: content-box;
min-width: 1.7rem;
height: 0.1rem;
line-height: 0.1rem;
padding: 0.2rem 0.2rem;
}
#pro .row .rowMain .r_top .comBox .dateBox .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.1rem;
line-height: 0.1rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#pro .row .rowMain .r_top .comBox .dateBox .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .row .rowMain .r_top .comBox .dateBox .skewBox > input {
background-color: transparent;
border: none;
width: 100%;
color: #959595;
font-size: 0.14rem;
height: 0.4rem;
line-height: 0.4rem;
position: absolute;
cursor: pointer;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding-right: 0.4rem;
z-index: 100;
}
#pro .row .rowMain .r_top .comBox .dateBox .skewBox > i {
position: absolute;
right: 0.14rem;
top: 0;
bottom: 0;
margin: auto;
height: 0.26rem;
line-height: 0.26rem;
display: inline-block;
font-size: 0.26rem;
color: #a6a6a6;
z-index: 10;
}
#pro .row .rowMain .r_top .title {
margin: 0.4rem 0;
margin-bottom: 1rem;
}
#pro .row .rowMain .r_top .title > span {
display: inline-block;
font-size: 0.32rem;
color: #333;
font-weight: bold;
visibility: hidden;
animation-duration: 0.8s;
}
#pro .row .rowMain .r_top .title > small {
font-size: 0.18rem;
display: block;
margin: 0.1rem 0;
color: #808080;text-transform: initial;
}
#pro .row .rowMain .r_btm {
margin: 30px 0;
}
#pro .row .rowMain .r_btm .btnBox {
position: relative;
height: 0.5rem;
padding: 30px 0;
box-sizing: content-box;
}
#pro .row .rowMain .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
color: #333;
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#pro .row .rowMain .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;
height: 0.5rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#pro .r1 .r_top .title {
position: relative;
}
#pro .r1 .r_top .title .title_item {
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 1.5rem;
top: 0;
height: 100%;
padding-left: 0.8rem;
}
#pro .r1 .r_top .title .title_item > i {
position: absolute;
display: inline-block;
font-size: 0.32rem;
left: 0.1rem;
top: 0;
bottom: 0;
margin: auto;
text-shadow: 8px 0 0px rgba(0, 0, 0, 0.19);
}
#pro .r1 .r_top .title .title_item > li {
display: table;
float: left;
height: 100%;
padding: 0 12px;
margin: 0 12px;
position: relative;
z-index: 10;
visibility: hidden;
}
#pro .r1 .r_top .title .title_item > li > a {
font-size: 0.2rem;
display: table-cell;
vertical-align: middle;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
position: relative;
background-color: #fff;
z-index: 100;
}
#pro .r1 .r_top .title .title_item > li:after {
content: attr(data-num);
position: absolute;
color: #eaeaea;
font-size: 0.4rem;
font-family: En_bold;
z-index: -1;
left: 0;
right: 0;
margin: auto;
width: 0.5rem;
top: -0.64rem;
letter-spacing: 20px;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
filter: blur(5px);
opacity: 0;
transform-origin: 50% 50%;
}
#pro .r1 .r_top .title .title_item > li:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r1 .r_top .title .title_item > li.active > a,
#pro .r1 .r_top .title .title_item > li:hover > a {
color: #fff;
background-color: #2640bf;
}
#pro .r1 .r_top .title .title_item > li.active:before,
#pro .r1 .r_top .title .title_item > li:hover:before {
background-color: #2640bf;
}
#pro .r1 .r_top .title .title_item > li.active:after,
#pro .r1 .r_top .title .title_item > li:hover:after {
top: -0.32rem;
letter-spacing: 2px;
filter: blur(0px);
opacity: 1;
}
#pro .r1 .r_center {
padding-bottom: 1rem;
}
#pro .r1 .r_center .pro_list1 {
display: none;
}
#pro .r1 .r_center .pro_item1 {
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
display: flex;
justify-content: space-around;
align-items: center;
height: 5rem;
position: relative;
}
#pro .r1 .r_center .pro_item1:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
z-index: -1;
background-color: #dcdcdc;
}
#pro .r1 .r_center .pro_item1 > li {
display: table;
float: left;
width: 25%;
max-width: 3rem;
height: 100%;
position: relative;
padding: 0 2%;
border: none;
animation-duration: 0.8s;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r1 .r_center .pro_item1 > li > .Tmask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background-color: #2640bf;
}
#pro .r1 .r_center .pro_item1 > li > a {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
transform: skew(0, 3deg);
-webkit-transform: skew(0, 3deg);
-moz-transform: skew(0, 3deg);
-o-transform: skew(0, 3deg);
text-align: center;
position: relative;
z-index: 100;
}
#pro .r1 .r_center .pro_item1 > li > a > i {
font-size: 0.52rem;
display: inline-block;
height: 1.6rem;
line-height: 1.6rem;
animation-delay: .3s;
animation-duration: 0.6s;
}
#pro .r1 .r_center .pro_item1 > li > a > span {
font-size: 0.18rem;
color: #303a43;
text-align: center;
display: block;text-transform: initial;
}
#pro .r1 .r_center .pro_item1 > li.active {
background-color: #2640bf;
box-shadow: 0 20px 55px -5px rgba(0, 96, 229, 0.6);
}
#pro .r1 .r_center .pro_item1 > li.active > a > i {
color: #fff;
}
#pro .r1 .r_center .pro_item1 > li.active > a > span {
color: #fff;text-transform: initial;
}
#pro .r2 {
position: relative;
}
#pro .r2 .playBox {
display: inline-block;
position: absolute;
text-align: center;
bottom: -0.2rem;
right: 10%;
z-index: 10001;
}
#pro .r2 .playBox > a.Tplay {
display: block;
text-align: center;
color: #fff;
width: 0.74rem;
height: 0.74rem;
line-height: 0.74rem;
border-radius: 50%;
background-color: #2640bf;
box-shadow: 0 10px 32px -5px rgba(0, 44, 255, 0.43);
cursor: pointer;
}
#pro .r2 .playBox > a.Tplay > i {
color: #fff;
font-size: 0.32rem;
}
#pro .r2 .playBox > span {
color: #b2b2b2;
font-size: 0.12rem;
text-align: center;
height: 0.4rem;
line-height: 0.4rem;
}
#pro .r2 .skew {
overflow: hidden;
}
#pro .r2 .skew .Tvideo {
position: absolute;
width: 100%;
height: 112%;
top: -6%;
left: 0;
overflow: hidden;
transform-origin: 50% 50%;
transform: skew(0, 2.4deg);
-webkit-transform: skew(0, 2.4deg);
-moz-transform: skew(0, 2.4deg);
-o-transform: skew(0, 2.4deg);
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r2 .skew .Tvideo video{
object-fit: contain!important;
height: 90%;
opacity: 0;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r2 .skew .Tvideo.on video{
opacity: 1;
}
#pro .r2 .skew .Tvideo .pic {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0;
overflow: hidden;
transform-origin: 50% 50%;
z-index: 6;
opacity: 1;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r2 .skew .Tvideo .Tmask {
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
position: absolute;
width: 0.74rem;
left: 0;
top: 100%;
bottom: 0;
right: 0;
margin: auto;
background-color: transparent;
border-radius: 50%;
border-width: 20rem;
border-color: #fff;
border-style: solid;
box-sizing: content-box;
z-index: 5;
}
#pro .r2 .skew .Tvideo.on .pic {
opacity: 0;
}
#pro .r2 .skew .Tvideo.on .Tmask {
width: 200%;
height: 20rem!important;
left: -32rem;
top: 0;
bottom: 0%;
right: 0;
}
#pro .r2 .rowMain.on {
opacity: 0;
}
#pro .r2 .rowMain {
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
}
#pro .r2 .r_top .title {
margin-bottom: 0rem!important;
}
#pro .r2 .r_center {
height: 4.6rem;
position: relative;
}
#pro .r2 .r_center > span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 3.6rem;
margin: auto;
text-transform: uppercase;
font-size: 2rem;
font-family: En_light;
letter-spacing: 15px;
text-align: center;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}
#pro .r3 .r_center > ul {
width: 100%;
padding: 0.3rem 0;
overflow: hidden;
display: flex;
padding-bottom: 0.6rem;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
#pro .r3 .r_center > ul > li {
display: inline-block;
float: left;
position: relative;
cursor: pointer;
margin: 0.2px 0 0.6rem 0;
}
#pro .r3 .r_center > ul > li .skewBox {
transform: skew(0, -3deg) scale(0.9);
-webkit-transform: skew(0, -3deg) scale(0.9);
-moz-transform: skew(0, -3deg) scale(0.9);
-o-transform: skew(0, -3deg) scale(0.9);
display: block;
overflow: hidden;
}
#pro .r3 .r_center > ul > li .skewBox > img {
transform: skew(0, 3deg) scale(1.1);
-webkit-transform: skew(0, 3deg) scale(1.1);
-moz-transform: skew(0, 3deg) scale(1.1);
-o-transform: skew(0, 3deg) scale(1.1);
}
#pro .r3 .r_center > ul > li:after {
content: attr(data-title);
position: absolute;
left: 0;
right: 0;
margin: auto;
height: 0.3rem;
line-height: 0.3rem;
color: #333;
top: 108%;
font-size: 0.16rem;
font-weight: bold;
text-align: center;
}
#pro .r4 #scene {
width: 100%;
height: 500px;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
}
#pro .r4 .canvas-box {
width: 100%;
height: 500px;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
}
#pro .r4 .r_center {
position: relative;
}
#pro .r4 .r_center #cv {
position: absolute;
z-index: 1001;
top: 0;
left: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
}
#pro .r4 .r_center .proItem {
display: flex;
justify-content: space-around;
align-items: flex-start;
margin: 0.7rem 0 0.3rem 0;
position: relative;
z-index: 1005;
}
#pro .r4 .r_center .proItem > .proList {
padding-top: 45px;
position: relative;
min-width: 1.6rem;
cursor: pointer;
}
#pro .r4 .r_center .proItem > .proList:after {
content: attr(data-name);
position: absolute;
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
left: 19px;
font-size: 0.18rem;
font-weight: bold;
color: #333;
}
#pro .r4 .r_center .proItem > .proList > li {
padding-left: 20px;
font-size: 0.14rem;
position: relative;
height: 0.25rem;
line-height: 0.25rem;
color: #999;
}
#pro .r4 .r_center .proItem > .proList > li:after {
content: '';
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
left: 4px;
top: 10px;
background-color: #337aff;
}
#pro .r4 .r_center .proItem > .proList > li:hover {
color: #337aff;
}
#pro .r4 .r_center .proItem > .proList:hover:after {
color: #337aff;
}
#pro .r4 .r_center .proItem .proList.active:after {
color: #337aff;
}
#pro .r4 .r_center .imgBox {
margin: 0.6rem 0 0rem 0;
}
#pro .r4 .r_center .imgBox .carItem > li {
text-align: center;
position: relative;
min-height: 400px;
}
#pro .r4 .r_center .imgBox .carItem > li .carMask0 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: visible;
opacity: 1;
}
#pro .r4 .r_center .imgBox .carItem > li .carMask1 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#pro .r4 .r_center .imgBox .carItem > li .carMask2 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#pro .r4 .r_center .imgBox .carItem > li .carMask3 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#pro .r4 .r_center .imgBox .carItem > li .carMask4 {
position: absolute;
z-index: 1000;
right: 0;
margin: auto;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
visibility: hidden;
opacity: 0;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_1 {
top: 32px;
left: -19px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_2 {
left: -30px;
top: 30px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen0.c1_2.active {
left: -80px;
top: 2px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_1 {
top: 61px;
left: -328px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_2 {
left: -345px;
top: 61px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen1.c1_2.active {
left: -418px;
top: 32px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_1 {
top: 24px;
left: -157px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_2 {
top: 25px;
left: -176px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen2.c1_2.active {
top: 0px;
left: -246px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_1 {
top: 24px;
left: -72px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_2 {
top: 24px;
left: -72px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen3.c1_2.active {
top: 0px;
left: -91px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_1 {
top: 82px;
left: 0px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_2 {
top: 82px;
left: 0px;
}
#pro .r4 .r_center .imgBox .carItem > li .carscreen4.c1_2.active {
top: 82px;
left: 78px;
}
#pro .r4 .r_center .imgBox .carItem > li .car {
display: none;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
}
#pro .r4 .r_center .imgBox .carItem > li .car.show {
display: inline-block;
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
}
#pro .r4 .r_center .imgBox .carItem > li .moveOut {
transform: rotateY(30deg) !important;
-webkit-transform: rotateY(30deg) !important;
-moz-transform: rotateY(30deg) !important;
-o-transform: rotateY(30deg) !important;
opacity: 0!important;
}
#pro .r4 .r_center .imgBox .carItem > li .moveIn {
transform: rotateY(-30deg);
-webkit-transform: rotateY(-30deg);
-moz-transform: rotateY(-30deg);
-o-transform: rotateY(-30deg);
display: inline-block;
opacity: 0;
}
#pro .r5 .r_center {
text-align: center;
height: 2.2rem;
line-height: 2.2rem;
}
#pro .r5 .r_center > a.txtDown {
display: inline-block;
margin: 0 0.4rem;
color: #999;
font-size: 0.24rem;
font-weight: bold;
vertical-align: middle;
}
#pro .r5 .r_center > a.txtDown > i {
color: #999;
font-size: 0.24rem;
vertical-align: middle;
}
#pro .r5 .r_center > .mycontact {
display: inline-block;
margin: 0 0.4rem;
position: relative;
box-sizing: content-box;
min-width: 1.3rem;
height: 0.1rem;
line-height: 0.1rem;
padding: 0.2rem 0.2rem;
vertical-align: middle;
}
#pro .r5 .r_center > .mycontact > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.1rem;
line-height: 0.1rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#pro .r5 .r_center > .mycontact:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0);
-webkit-transform: skew(-8deg, 0);
-moz-transform: skew(-8deg, 0);
-o-transform: skew(-8deg, 0);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro .r5 .r_center > .mycontact:after {
background-color: #e5e5e5;
}
#pro .r5 .r_center > .mycontact > a.Tcon {
color: #4e4e4e;
}
#pro .r5 .r_center > .mycontact > a.Tcon > i {
color: #777;
font-size: 0.24rem;
margin-right: 0.1rem;
vertical-align: sub;
}
#pro .r6 .r_center > ul {
width: 100%;
padding: 0.3rem 0;
overflow: hidden;
display: flex;
padding-bottom: 0.6rem;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
#pro .r6 .r_center > ul > li {
display: inline-block;
float: left;
background-color: #fff;
margin: 0.2rem 0 0.8rem 0;
position: relative;
cursor: pointer;
width: 40%;
box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease-in-out;
}
#pro .r6 .r_center > ul > li .skewBox {
display: block;
overflow: hidden;
margin: 20px;
}
#pro .r6 .r_center > ul > li.width-100 {
width: 80%;
}
#pro .r6 .r_center > ul > li:hover {
box-shadow: 20px 30px 20px -5px rgba(0, 0, 0, 0.15);
}
#pro .r6 .r_center > ul > li:after {
content: attr(data-title);
position: absolute;
left: 0;
right: 0;
margin: auto;
height: 0.3rem;
line-height: 0.3rem;
color: #333;
top: 106%;
font-size: 0.16rem;
font-weight: bold;
text-align: center;
}
/* å…¬å¸æ²»ç† */
#prolist .part {
display: none;
position: absolute;
}
#prolist .banner {
position: absolute!important;
width: 100%!important;
z-index: -1;
}
#prolist .banner .video {
position: absolute;
width: 100%;
top: 0;
height: 100%;
}
#prolist .Trow img {
width: 100%;
}
#prolist #footer {
display: none;
}
#zhili .r1 .r_center .box .skewBox {
position: relative;
box-sizing: content-box;
min-width: 100%;
line-height: 3rem;
padding: 0.2rem 0.2rem;
margin-bottom: 1.4rem;
}
#zhili .r1 .r_center .box .skewBox > span.Tcon,#zhili .r1 .r_center .box .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
line-height: 3rem;
position: relative;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#zhili .r1 .r_center .box .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#zhili .r1 .r_center .box .skewBox > a,#zhili .r1 .r_center .box .skewBox > span {
line-height: normal!important;
padding: 0.4rem 6.25%;
}
#zhili .r1 .r_center .box .skewBox h5 {
margin-bottom: 0.4rem;
}
#zhili .r1 .r_center .box .skewBox p {
overflow: hidden;
}
#zhili .r1 .r_center .box h4 {
margin-bottom: 0.8rem;
padding-left: 0.5rem;
position: relative;
}
#zhili .r1 .r_center .box h4:after {
content: '';
height: 0.3rem;
width: 0.2rem;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #2740bf;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
z-index: 10;
}
#zhili .r1 .r_center .box h4:before {
content: '';
height: 0.3rem;
width: 0.2rem;
position: absolute;
left: 0.08rem;
opacity: 0.3;
top: 0;
bottom: 0;
margin: auto;
background-color: #2740bf;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
z-index: 9;
}
/* 独立董事ã€ç›‘äº‹äº¤æµ */
#jiaoliu .r1 {
margin-bottom: 0.5rem!important;
}
#jiaoliu .r1 .rowMain {
overflow: visible!important;
}
#jiaoliu .r1 .skew {
background-color: #fff;
}
#jiaoliu .r1 .r_center {
padding-top: 1rem;
padding-bottom: 1rem;
}
#jiaoliu .r1 .r_center > .box .layout-mBox {
padding-right: 3.2rem;
box-sizing: border-box;
width: 100%;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right {
position: absolute;
right: 0;
top: 0;
width: 3.2rem;
padding: 0 0.3rem;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right .skew {
background-color: #f0f4f7;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box {
z-index: 2000;
position: relative;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-top h4 {
color: #333;
font-size: 0.23rem;
font-weight: bold;
padding: 0.1rem 0 0.2rem 0;
border-bottom: 1px solid #d3dce2;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li {
position: relative;
padding-left: 0.35rem;
margin: 0.2rem 0 0.3rem 0;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > span {
font-size: 0.16rem;
color: #333;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > small {
font-size: 0.12rem;
color: #898989;
display: block;
margin-bottom: 0.1rem;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > a {
font-size: 0.14rem;
color: #6088ee;
display: inline-block;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-center ul > li > i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
color: #eb062b;
font-size: 0.24rem;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox {
position: relative;
height: 0.4rem;
padding: 30px 0;
box-sizing: content-box;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox > .btn {
font-size: 0.13rem;
color: #abb3b9;
text-align: center;
color: #6a6a6a;
width: 1.2rem;
height: 0.4rem;
background-color: transparent;
line-height: 0.4rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#jiaoliu .r1 .r_center > .box .layout-pa-right > .box > .layout-btm .btnBox:after {
content: '';
position: absolute;
width: 1.2rem;
height: 0.4rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#jiaoliu2 .r1 {
margin-bottom: 0.5rem!important;
}
#jiaoliu2 .r1 .rowMain {
overflow: visible!important;
}
#jiaoliu2 .r1 .rowMain .r_center {
padding-top: 1rem;
padding-bottom: 1rem;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child {
text-align: center;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child {
display: inline-block;
padding-right: 0.35rem;
position: relative;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child > b:first-child {
color: #242424;
font-size: 0.2rem;
display: block;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child .redcolor {
color: #e62b1e;
font-size: 0.6rem;
font-family: En_bold;
display: inline-block;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span:first-child > i {
display: inline-block;
position: absolute;
bottom: 0.18rem;
right: 0;
font-size: 0.35rem;
color: #e62b1e;
-webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span {
display: inline-block;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span > a.redcolor {
color: #e62b1e;
font-size: 0.20rem;
font-family: En_bold;
display: inline-block;
}
#jiaoliu2 .r1 .rowMain .r_center > div:first-child > span a {
font-size: 0.14rem;
color: #666;
}
#jiaoliu2 .r1 .rowMain .r_center > ul {
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative;
}
#jiaoliu2 .r1 .rowMain .r_center > ul:after {
content: '';
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 1px;
background-color: #b3b3b3;
transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1.2s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li {
margin: 0 0.4rem;
padding: 0.3rem 0;
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li > span {
font-size: 0.14rem;
color: #666;
display: block;
height: 0.3rem;
line-height: 0.3rem;
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li > a {
display: block;
font-size: 0.2rem;
font-family: En_bold;
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li .redcolor {
color: #e62b1e;
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li .greencolor {
color: #10a800;
}
#jiaoliu2 .r1 .rowMain .r_center > ul > li .graycolor {
color: #a6a8ae;
}
#jiaoliu2 .r1 .skew {
background-color: #fff;
}
#jiaoliu2 .r2 {
padding-top: 0.68rem!important;
padding-bottom: 0.68rem!important;
}
#jiaoliu2 .r2 .rowMain .r_center > h4 {
font-size: 0.2rem;
color: #484848;
text-align: center;
padding-bottom: 0.3rem;
position: relative;
opacity: 0;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
#jiaoliu2 .r2 .rowMain .r_center > h4:after {
content: '';
position: absolute;
width: 0.26rem;
height: 6px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
background-color: #337aff;
transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1.5s cubic-bezier(0.7, 0.01, 0.3, 1);
transform: translateY(15px);
-webkit-transform: translateY(15px);
-moz-transform: translateY(15px);
-o-transform: translateY(15px);
}
#jiaoliu2 .r2 .rowMain .r_center > h4.go {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
#jiaoliu2 .r2 .rowMain .r_center > h4.go:after {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
#jiaoliu2 .r2 .rowMain .r_center > p {
text-align: center;
padding: 0.3rem 0;
font-size: 0.16rem;
font-weight: bold;
color: #484848;
line-height: 240%;
}
#jiaoliu2 .r3 {
padding-top: 1rem!important;
padding-bottom: 1rem!important;
}
#jiaoliu2 .r3 .rowMain .r_top {
text-align: left;
margin-bottom: 0.4rem;
line-height: 200%;
font-size: 0.15rem;
color: #333;text-transform: initial;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text {
width: 50%;
display: inline-block;
float: left;
padding-right: 10%;
margin: 0.25rem 0;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > span {
font-size: 0.16rem;
color: #333;
display: block;
text-align: left;
height: 0.36rem;
line-height: 0.36rem;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > input,
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-text > textarea {
width: 100%;
border: none;
background-color: rgba(0, 0, 0, 0.2);
box-sizing: border-box;
padding: 0 6px;
height: 0.5rem;
font-size: 0.14rem;
color: #fff;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-textarea {
width: 100%;
}
#jiaoliu2 .r3 .rowMain .r_center form > ul > .list-textarea > textarea {
height: 1.5rem;
padding: 6px;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub {
text-align: center;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox {
position: relative;
box-sizing: content-box;
min-width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
padding: 0.2rem 0.2rem;
display: inline-block;
padding: 0.1rem 0;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox > a.Tcon {
font-size: 0.16rem;
text-align: center;
color: #333;
width: 100%;
background-color: transparent;
display: block;
height: 0.5rem;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 4;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
z-index: -1;
transform: skew(-8deg, 0deg);
-webkit-transform: skew(-8deg, 0deg);
-moz-transform: skew(-8deg, 0deg);
-o-transform: skew(-8deg, 0deg);
top: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#jiaoliu2 .r3 .rowMain .r_center form .sub > .skewBox > a.Tcon {
font-size: 0.20rem;
color: #fff;
letter-spacing: 3px;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub .subBtn:after {
background-color: #2740bf;
}
#jiaoliu2 .r3 .rowMain .r_center form .sub .resizeBtn:after {
background-color: #4b565a;
}
.dialog {
position: fixed;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
pointer-events: none;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10000;
}
.dialog .dialog_mask {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10001;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.dialog .dialog_content {
width: 50%;
background: #fff;
text-align: center;
position: relative;
z-index: 10005;
opacity: 0;
}
.dialog.dialog--open{
visibility: visible;
}
.dialog.dialog--open .dialog_mask {
opacity: 1;
pointer-events: auto;
}
.dialog.dialog--open .dialog_content {
opacity: 1;
pointer-events: auto;
}
#dialog_video .dialog_content {
width: 750px;
overflow: visible;
}
#dialog_video .dialog_content .Tbox {
overflow: visible;
}
#dialog_video .dialog_content .Tbox .left {
float: left;
width: 100%;
background-color: #fff;
}
#dialog_video .dialog_content .Tbox .left .videoBox {
width: 100%;
position: relative;
}
#dialog_video .dialog_content .Tbox .left .videoBox .Tplay {
position: absolute;
height: 45px;
width: 45px;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 32px;
text-align: center;
border: 2px solid #fff;
opacity: 0.8;
cursor: pointer;
}
#dialog_video .dialog_content .Tbox .left .videoBox .Tplay > i {
font-size: 0.2rem;
color: #fff;
display: inline-block;
line-height: 0.4rem;
}
#dialog_video .dialog_content .Tbox .left .Tmsg {
padding: 0.15rem 0.24rem;
}
#dialog_video .dialog_content .Tbox .left .Tmsg p {
font-size: 0.25rem;
font-weight: bold;
text-align: left;
margin: 0.1rem 0;
}
#dialog_video .dialog_content .Tbox .left .Tmsg small {
height: 0.2rem;
line-height: 0.2rem;
display: block;
width: 1.8rem;
float: right;
}
#dialog_video .dialog_content .Tbox .left .Tmsg small > span {
color: #333;
opacity: 0.5;
font-size: 0.12rem;
display: inline-block;
vertical-align: middle;
height: 100%;
height: 0.2rem;
line-height: 0.2rem;
font-family: En_bold;
float: left;
text-align: left;
margin-right: 0.1rem;
}
#dialog_video .dialog_content .Tbox .left .Tmsg small > span > i {
display: inline-block;
margin-right: 6px;
margin-left: 4px;
font-size: 0.18rem;
vertical-align: sub;
color: #333;
height: 0.2rem;
line-height: 0.2rem;
opacity: 0.5;
}
#dialog_video .dialog_content .Tbox .left .Tmsg small > span:last-child {
float: right;
margin-right: 0rem;
}
#dialog_video .dialog_content .Tbox .right {
float: right;
width: 22%;
height: 100%;
background-color: #292929;
padding: 0.12rem;
}
#dialog_video .dialog_content .Tbox .right .top {
font-size: 0.18rem;
font-weight: bold;
text-align: left;
color: #fff;
height: 0.6rem;
line-height: 0.6rem;
}
#dialog_video .dialog_content .Tbox .right .item {
display: flex;
align-content: space-between;
flex-wrap: wrap;
margin-top: 0.2rem;
}
#dialog_video .dialog_content .Tbox .right .item > li {
width: 100%;
position: relative;
margin-bottom: 0.15rem;
}
#dialog_video .dialog_content .Tbox .right .item > li > img {
width: 100%;
}
#dialog_video .dialog_content .Tbox .right .item > li .Tmsg {
position: absolute;
font-size: 0.12rem;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 0.3rem;
line-height: 0.3rem;
bottom: 0;
left: 0;
}
#dialog_video .dialog_content .Tbox i[data-dialog-close] {
display: inline-block;
width: 0.64rem;
height: 0.64rem;
line-height: 0.64rem;
font-size: 0.18rem;
color: #fff;
text-align: center;
background-color: #2640bf;
left: 100%;
top: 0;
cursor: pointer;
}
.blurInDown {
-webkit-animation-name: blurInDown;
animation-name: blurInDown;
}
@keyframes blurInDown {
from {
transform: scale(1.2) translateY(-25px);
-webkit-transform: scale(1.2) translateY(-25px);
-moz-transform: scale(1.2) translateY(-25px);
-o-transform: scale(1.2) translateY(-25px);
filter: blur(3px);
opacity: 0;
}
to {
transform: scale(1) translateY(0px);
-webkit-transform: scale(1) translateY(0px);
-moz-transform: scale(1) translateY(0px);
-o-transform: scale(1) translateY(0px);
opacity: 1;
filter: blur(0px);
}
}
.fadeInSoftDown {
-webkit-animation-name: fadeInSoftDown;
animation-name: fadeInSoftDown;
}
@keyframes fadeInSoftDown {
from {
transform: translateY(-35px);
-webkit-transform: translateY(-35px);
-moz-transform: translateY(-35px);
-o-transform: translateY(-35px);
opacity: 0;
}
to {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
opacity: 1;
}
}
.blurInUp {
-webkit-animation-name: blurInUp;
animation-name: blurInUp;
}
@keyframes blurInUp {
from {
filter: blur(3px);
transform: scale(1.2) translateY(25px);
-webkit-transform: scale(1.2) translateY(25px);
-moz-transform: scale(1.2) translateY(25px);
-o-transform: scale(1.2) translateY(25px);
opacity: 0;
}
to {
filter: blur(0px);
transform: scale(1) translateY(0px);
-webkit-transform: scale(1) translateY(0px);
-moz-transform: scale(1) translateY(0px);
-o-transform: scale(1) translateY(0px);
opacity: 1;
}
}
.blurInLeft {
-webkit-animation-name: blurInLeft;
animation-name: blurInLeft;
}
@keyframes blurInLeft {
from {
filter: blur(3px);
transform: translateX(-300px);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
opacity: 0;
}
to {
filter: blur(0px);
transform: translateX(0px);
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
opacity: 1;
}
}
.prolist1 {
width: 100%;
}
.prolist1.pa {
pointer-events: none;
opacity: 0;
top: 0;
visibility: hidden;
}
/*页ç */
.page_row {
position: relative;
}
.page_text {
font-size: 14px;
position: absolute;
left: 0;
display: inline-block;
height: 28px;
line-height: 28px;
}
.page {
overflow: hidden;
margin: 0 auto;
display: inline-block;
font-size: 14px;
}
.page_list {
overflow: hidden;
float: left;
}
.page_list li {
float: left;
font-size: 14px;
width: 36px;
margin: 0 4px;
border: 1px solid #e2e2e2;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 3px;
cursor: pointer;
}
.page_list li a{ display:block;}
.getpage {
width: 35px;
display: inline-block;
border: 1px solid #e2e2e2;
height: 17px;
line-height: 17px;
font-size: 14px;
}
.page_choose {
background: #337aff;
border-color: #337aff;
color: #fff;
}
.page_set {
width: 83px;
height: 36px;
border: 1px solid #e2e2e2;
line-height: 36px;
text-align: center;
float: left;
cursor: pointer;
font-size: 14px;
}
.page_set a{ display:block;}
.page_set img {
vertical-align: 2px;
}
.baogaoList {
overflow: hidden;
}
.baogaoList > span {
display: inline-block;
border-bottom: 1px solid #eee;
height: 60px;
line-height: 60px;
font-size: 16px;
font-weight: bold;
margin-bottom: 32px;
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.baogaoList > span:nth-child(1) {
width: 15%;
float: left;
font-family: En_bold;
}
.baogaoList > span:nth-child(2) {
width: 83%;
font-size: 14px;
float: right;
position: relative;
}
.baogaoList > span:nth-child(2) > i {
margin-right: 10px;
font-size: 18px;
transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.baogaoList > span:nth-child(2) .go {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 20px;
margin-left: 25px;
line-height: 20px;
font-weight: 100;
opacity: 0;
font-size: 14px;
transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.4s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.baogaoList:hover > span {
color: #337aff;
}
.baogaoList:hover > span > i:nth-child(1) {
color: #337aff;
}
.baogaoList:hover > span .go {
margin-left: 15px;
opacity: 1;
}
#style1 {
position: absolute;
right: 0;
top: 0;
width: 3.2rem;
padding: 0 0.3rem;
}
#style1 .skew {
background-color: #f0f4f7;
}
#style1 > .box {
z-index: 2000;
position: relative;
}
#style1 > .box > .layout-top h4 {
color: #333;
font-size: 0.23rem;
font-weight: bold;
padding: 0.1rem 0 0.2rem 0;
border-bottom: 1px solid #d3dce2;
}
#style1 > .box > .layout-center ul > li {
position: relative;
padding-left: 0.35rem;
margin: 0.2rem 0 0.3rem 0;
}
#style1 > .box > .layout-center ul > li > span {
font-size: 0.16rem;
color: #333;
}
#style1 > .box > .layout-center ul > li > small {
font-size: 0.12rem;
color: #898989;
display: block;
margin-bottom: 0.1rem;
}
#style1 > .box > .layout-center ul > li > a {
font-size: 0.14rem;
color: #6088ee;
display: inline-block;
}
#style1 > .box > .layout-center ul > li > i {
display: inline-block;
position: absolute;
top: 0;
left: 0;
color: #eb062b;
font-size: 0.24rem;
}
#style1 > .box > .layout-btm .btnBox {
position: relative;
height: 0.4rem;
padding: 30px 0;
box-sizing: content-box;
}
#style1 > .box > .layout-btm .btnBox > .btn {
font-size: 0.13rem;
color: #abb3b9;
text-align: center;
color: #6a6a6a;
width: 1.2rem;
height: 0.4rem;
background-color: transparent;
line-height: 0.4rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#style1 > .box > .layout-btm .btnBox:after {
content: '';
position: absolute;
width: 1.2rem;
height: 0.4rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#pro_nav .r1 {
position: relative;
}
#pro_nav .r1 .pro_type {
width: 20%;
height: 100%;
transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.5s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro_nav .r1 .pro_type h5 {
font-size: 0.35rem;
font-weight: bold;
color: #fff;
text-align: center;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
height: 70px;
}
#pro_nav .r1 .pro_type h5 > small {
display: block;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
font-size: 0.12rem;
}
#pro_nav .r1 .pro_type:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
mix-blend-mode: multiply;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#pro_nav .r1 .pro_type:hover,#pro_nav .r1 .pro_type.on {
z-index: 3;
width: 25%;
}
#pro_nav .r1 .pro_type:hover h5,#pro_nav .r1 .pro_type.on h5 {
height: 352px;
}
#pro_nav .r1 .pro_type:hover h5 .layout-ul,#pro_nav .r1 .pro_type.on h5 .layout-ul {
display: block;
}
#pro_nav .r1 .pro_type:hover:after,#pro_nav .r1 .pro_type.on:after {
background-color: #2640bf;
}
#pro_nav .r2 {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0.7rem 0;
z-index: 10000;
background-color: #fff;
}
#pro_nav .r2 .pro_type {
width: 42%;
margin: 0 4%;
height: 3rem;
position: relative;
}
#pro_nav .r2 .pro_type p {
text-align: center;
color: #fff;
font-size: 0.24rem;
font-weight: bold;
}
#pro_nav .r2 .pro_type:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
#pro .guidao_dot .Tcon:after {
content: "";
position: absolute;
height: 0.5rem;
width: 3px;
background-color: #fff;
left: 0;
right: 0;
margin: auto;
transform: translateY(20px);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
}
#pro .guidao_dot .guidao_item {
width: 100%;
bottom: 0;
left: 0;
background-color: #2640bf;
padding: 0.25rem 0.3rem 0 0.25rem;
opacity: 0;
transform: translateY(20px);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
z-index: 103;
}
#pro .guidao_dot .guidao_item > .list {
margin-bottom: 0.24rem;
color: rgba(255, 255, 255, 0.5);
transform: skew(0, 3deg);
-webkit-transform: skew(0, 3deg);
-moz-transform: skew(0, 3deg);
-o-transform: skew(0, 3deg);
}
#pro .guidao_dot .guidao_item > .list > b {
display: block;
color: #fff;
}
#pro .guidao_dot:hover .guidao_item {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
#pro .guidao_list {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
position: relative;
padding-top: 1rem!important;
}
#pro .guidao_list .Ttitle {
width: 100%;
color: #333;
text-align: center;
font-weight: bold;
height: 0.6rem;
line-height: 0.8rem;
left: 0;
top: 0;
font-size: 0.2rem;
}
#pro .guidao_list .Ttitle:after {
content: attr(data-num);
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: -1;
color: #dadada;
font-size: 0.5rem;
font-family: En_bold;
letter-spacing: 3px;
top: -10px;
}
#pro .guidao_list .skewBox {
background-color: #fff;
padding-left: 2rem;
height: 2rem;
line-height: 2rem;
}
#pro .guidao_list .skewBox > img {
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0.4rem;
max-width: 1.32rem;
}
#pro .guidao_list .skewBox > span {
font-size: 0.18rem;
transform: skew(0, 3deg);
-webkit-transform: skew(0, 3deg);
-moz-transform: skew(0, 3deg);
-o-transform: skew(0, 3deg);
display: inline-block;
width: 90%;
}
#pro .guidao_list .skewBox > small {
display: inline-block;
width: 24%;
text-align: center;
line-height: 0.6rem;
transform: skew(0, 3deg);
-webkit-transform: skew(0, 3deg);
-moz-transform: skew(0, 3deg);
-o-transform: skew(0, 3deg);
}
#pro .guidao_list .skewBox > small:nth-child(2){
padding-top: 25px;
}
#pro .guidao_list .skewBox > small:nth-child(3){
padding-top: 52px;
}
#pro .guidao_list .skewBox > small:nth-child(4){
padding-top: 78px;
}
#pro .guidao_list .skewBox > small > img {
display: block;
margin: auto;
}
#pro .guidao_list .skewBox > small > a {
font-size: 0.18rem;
}
.layout-tab {
display: table;
width: 2.2rem;
height: 100%;
margin: auto;
position: relative;
z-index: 3;
padding-top: 0.6rem;
}
.layout-tab > .cell {
display: table-cell;
vertical-align: middle;
}
.layout-ul {
margin-top: 0.1rem;
position: absolute;
display: none;
}
.layout-ul.on {
opacity: 1;
display: block;
}
.layout-ul > li {
height: 0.48rem;
line-height: 0.48rem;
position: relative;
padding-left: 0.64rem;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
margin: 0.2rem 0;
cursor: pointer;
}
.layout-ul > li * {
color: rgba(255, 255, 255, 0.5);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.layout-ul > li > i {
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
height: 0.42rem;
width: 0.42rem;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
line-height: 0.42rem;
display: inline-block;
text-align: center;
font-size: 0.28rem;
font-weight: 100;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.layout-ul > li > span {
font-weight: bold;
font-size: 0.2rem;
line-height: 0.24rem;
text-align: left;
display: block;
}
.layout-ul > li > span > small {
font-size: 0.12rem;
font-weight: 400;
display: block;
}
.layout-ul > li:hover * {
color: #ffffff;
}
.layout-ul > li:hover > i {
background-color: #fff;
color: #0f306e;
}
.about .founder_text{
line-height: 38px;
display: inline-block;
font-size: 0.24rem!important;
}
.about .row .about_title {
font-size: 0.32rem;
font-weight: bold;
margin-bottom: 0.2rem;
}
.about .row .about_title > small {
font-size: 0.32rem;
color: #b2b2b2;
font-weight: 300;
margin-right: 0.24rem;
text-transform: uppercase;
}
.about .row .r_center {
padding: 0 3%;
}
.about .row .r_center ul.myVideo {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
.about .row .r_center ul.myVideo > li {
display: inline-block;
float: left;
margin: 0 0.12rem;
width: 22%;
margin-bottom: 0.24rem;
}
.about .row .r_center ul.myVideo > li .picBox {
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.46);
cursor: pointer;
position: relative;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.about .row .r_center ul.myVideo > li .picBox:hover {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
.about .row .r_center ul.myVideo > li .picBox:hover .date {
background-color: #2640bf;
}
.about .row .r_center ul.myVideo > li .picBox .date {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
height: 0.3rem;
line-height: 0.3rem;
width: 100%;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.about .row .r_center ul.myVideo > li .picBox .date > span {
color: #fff;
padding: 0 0.1rem;
font-size: 0.12rem;
display: inline-block;
vertical-align: middle;
height: 100%;
}
.about .row .r_center ul.myVideo > li .picBox .date > span > i {
display: inline-block;
vertical-align: middle;
margin-left: 4px;
font-size: 0.14rem;
color: #fff;
}
.about .row .r_center ul.myVideo > li .picBox .date > span:last-child {
float: right;
}
.about .row .r_center ul.myVideo > li .Tmsg {
color: #333;
font-size: 0.14rem;
margin-top: 0.15rem;
text-transform: initial;
}
.about .small_txt {
display: inline-block;
color: #333;
font-weight: bold;
text-align: center;
}
.about .small_txt > small {
font-size: 0.16rem;
color: rgba(51, 51, 51, 0.5);
font-weight: 400;
display: block;
text-align: center;
text-transform: uppercase;
}
#about_1 .row .top {
padding-top: 18px;
font-size: 0.32rem;
font-weight: bold;
position: relative;
height: 0.8rem;
line-height: 0.8rem;
margin-bottom: 0.4rem;
}
#about_1 .row .r_top {
padding-top: 18px;
}
#about_1 .row .r_top .title {
margin: 0.4rem 0;
}
#about_1 .row .r_top .title span {
display: inline-block;
font-size: 0.32rem;
color: #333;
font-weight: bold;
visibility: hidden;
animation-duration: 0.8s;
}
#about_1 .row .r_xian {
width: 100%;
border-bottom: 1px solid #d9d9d9;
transform: skew(0, -2.4deg);
margin: 0.43rem 0;
}
#about_1 .row.r1 .skew {
background-color: #fff;
}
#about_1 .row.r1 .rowMain .r_top .top-box .top-left,
#about_1 .row.r1 .rowMain .r_top .top-box .top-right {
width: 50%;
text-align: justify;
}
#about_1 .row.r1 .rowMain .r_top .top-box .top-left {
padding-right: 0.2rem;
float: left;
}
#about_1 .row.r1 .rowMain .r_top .top-box .top-right {
padding-left: 0.2rem;
float: right;
}
#about_1 .row.r1 .rowMain .r_btm {
margin-top: 0.2rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
}
#about_1 .row.r1 .rowMain .r_btm .list {
width: 1.5rem;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top {
height: 100px;
position: relative;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span {
position: absolute;
z-index: 100;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span:nth-child(1) {
font-size: 0.8rem;
line-height: 1em;
font-weight: bold;
right: 0.35rem;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top .top-num span:nth-child(2) {
font-size: 0.13rem;
right: 0.18rem;
bottom: 0.2rem;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top .top-i {
position: absolute;
right: 0;
bottom: 0;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-top .top-i i {
display: block;
font-size: 0.8rem;
line-height: 1em;
color: #e8eaed;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-guo,
#about_1 .row.r1 .rowMain .r_btm .list .list-us {
font-weight: bold;
text-align: center;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-guo {
font-size: 16px;
color: #333;
margin-top: 20px;
}
#about_1 .row.r1 .rowMain .r_btm .list .list-us {
font-size: 24px;
color: #e3e4e5;
}
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(1) .list-top .top-num span,
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(3) .list-top .top-num span {
color: #337aff;
}
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(1) .list-top .top-num span:nth-child(1),
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(3) .list-top .top-num span:nth-child(1) {
text-shadow: 0 0.06rem 0.1rem rgba(0, 44, 255, 0.2);
}
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(2) .list-top .top-num span,
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(4) .list-top .top-num span {
color: #2640bf;
}
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(2) .list-top .top-num span:nth-child(1),
#about_1 .row.r1 .rowMain .r_btm .list:nth-child(4) .list-top .top-num span:nth-child(1) {
text-shadow: 0 0.06rem 0.1rem rgba(0, 44, 255, 0.2);
}
#about_1 .row.r2 {
position: relative;
}
#about_1 .row.r2 .playBox {
display: inline-block;
position: absolute;
text-align: center;
bottom: -0.2rem;
right: 10%;
z-index: 10001;
}
#about_1 .row.r2 .playBox > a.Tplay {
display: block;
text-align: center;
color: #fff;
width: 0.74rem;
height: 0.74rem;
line-height: 0.74rem;
border-radius: 50%;
background-color: #2640bf;
box-shadow: 0 10px 32px -5px rgba(0, 44, 255, 0.43);
cursor: pointer;
}
#about_1 .row.r2 .playBox > a.Tplay > i {
color: #fff;
font-size: 0.32rem;
}
#about_1 .row.r2 .playBox > span {
color: #b2b2b2;
font-size: 0.12rem;
text-align: center;
height: 0.4rem;
line-height: 0.4rem;
}
#about_1 .row.r2 .skew {
overflow: hidden;
}
#about_1 .row.r2 .skew .Tvideo {
position: absolute;
width: 100%;
height: 112%;
top: -6%;
left: 0;
overflow: hidden;
transform-origin: 50% 50%;
transform: skew(0, 2.4deg);
-webkit-transform: skew(0, 2.4deg);
-moz-transform: skew(0, 2.4deg);
-o-transform: skew(0, 2.4deg);
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_1 .row.r2 .skew .Tvideo video{
object-fit: contain!important;
height: 90%;
}
#about_1 .row.r2 .skew .Tvideo .pic {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
transform-origin: 50% 50%;
z-index: 6;
opacity: 1;
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_1 .row.r2 .skew .Tvideo .Tmask {
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
position: absolute;
width: 0.74rem;
left: 0;
top: 100%;
bottom: 0;
right: 0;
margin: auto;
background-color: transparent;
border-radius: 50%;
border-width: 20rem;
border-color: #fff;
border-style: solid;
box-sizing: content-box;
z-index: 5;
}
#about_1 .row.r2 .skew .Tvideo.on .pic {
opacity: 0;
}
#about_1 .row.r2 .skew .Tvideo.on .Tmask {
width: 200%;
height: 20rem!important;
left: -32rem;
top: 0;
bottom: 0%;
right: 0;
}
#about_1 .row.r2 .rowMain.on {
opacity: 0;
}
#about_1 .row.r2 .rowMain {
transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 1s cubic-bezier(0.7, 0.01, 0.3, 1);
opacity: 1;
}
#about_1 .row.r2 .r_top .title {
margin-bottom: 0rem!important;
}
#about_1 .row.r2 .r_center {
height: 4.6rem;
position: relative;
}
#about_1 .row.r2 .r_center > span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 3.6rem;
margin: auto;
text-transform: uppercase;
font-size: 2.2rem;
font-family: En_light;
letter-spacing: 15px;
text-align: center;
color: #2640bf;
opacity: 0.9;
}
#about_1 .row.r3 .rowMain .r_center .box {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
overflow: hidden;
}
#about_1 .row.r3 .rowMain .r_center ul {
width: 30000%;
height: 200px;
position: absolute;
float: none;
top: 100px;
left: 50px;
z-index: 10;
cursor: move;
}
#about_1 .row.r3 .rowMain .r_center li {
width: 13px;
height: 13px;
position: absolute;
float: none;
}
#about_1 .row.r3 .rowMain .r_center li i,
#about_1 .row.r3 .rowMain .r_center li i img {
width: 13px;
height: 13px;
position: relative;
float: left;
cursor: pointer;
webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#about_1 .row.r3 .rowMain .r_center li i img:hover {
webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
#about_1 .row.r3 .rowMain .r_center .box .e {
width: 1px;
height: 1px;
background-color: #198eed;
position: absolute;
}
#about_1 .row.r3 .rowMain .r_center li h3 {
font-size: 18px;
color: #0b8bd4;
white-space: nowrap;
font-weight: bold;
}
#about_1 .row.r3 .rowMain .r_center li h4 {
width: 130px;
line-height: 18px;
overflow: hidden;
font-size: 13px;
color: #464646;
}
#about_1 .row.r3 .rowMain .r_center li span {
position: absolute;
float: none;
left: -8px;
bottom: 25px;
}
#about_1 .row.r3 .rowMain .r_center li.b span {
bottom: auto;
top: 23px;
}
#about_1 .row.r3 .rowMain .r_center li.active h3 {
font-size: 35px;
}
#about_1 .row.r3 .rowMain .r_center li.active h4 {
width: 340px;
}
#about_1 .row.r3 .rowMain .r_center .car {
width: 61px;
height: 38px;
position: absolute;
float: none;
opacity: 0;
margin: -13px 0 0 -24.5px;
z-index: 10;
background: url(../images/public.png) no-repeat;
background-position: -195px -40px;
}
#about_1 .row.r3 .rowMain .r_center .car.back {
background-position: -195px -78px;
}
#about_1 .row.r3 .rowMain .r_center canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
#about_1 .row.r3 .rowMain .r_btm {
width: 100%;
text-align: center;
font-size: 16px;
vertical-align: middle;
margin-top: 20px;
}
#about_1 .row.r3 .rowMain .r_btm img {
float: none;
margin: 0 5px;
border: none;
}
#about_1 .row.r3 .rowMain .r_btm img:nth-child(1) {
margin-top: -10px;
}
#about_1 .row.r4 .r_center {
display: flex;
justify-content: space-between;
}
#about_1 .row.r4 .r_center .left-btn,
#about_1 .row.r4 .r_center .right-btn {
width: 0.64rem;
height: 0.64rem;
box-sizing: border-box;
border-radius: 100%;
border: 1px solid #d2d2d2;
position: relative;
display: inline-block;
}
#about_1 .row.r4 .r_center .left-btn img,
#about_1 .row.r4 .r_center .right-btn img {
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#about_1 .row.r4 .r_center .left-btn img {
right: 0;
}
#about_1 .row.r4 .r_center .year {
height: 0.64rem;
margin: 0 5px;
position: relative;
text-align: center;
width: calc(100% - 1.28rem);
}
#about_1 .row.r4 .r_center .year:before {
content: '';
width: 100%;
border-bottom: 1px dashed #bec3cc;
position: absolute;
top: 50%;
z-index: -1;
left: 0;
}
#about_1 .row.r4 .r_center .year .year-div span {
line-height: 0.64rem;
font-size: 0.28rem;
font-weight: bold;
padding: 0 0.2rem;
background-color: #fff;
color: #adadad;
}
#about_1 .row.r4 .r_center .year .year-cur {
position: relative;
}
#about_1 .row.r4 .r_center .year .year-cur i {
width: 0.31rem;
height: 0.17rem;
display: block;
line-height: 1em;
font-size: 0.3rem;
color: #337aff;
position: absolute;
left: 0;
right: 0;
top: -0.16rem;
margin: auto;
}
#about_1 .row.r4 .r_center .year .year-cur span {
font-size: 0.46rem;
color: #337aff;
}
#about_1 .row.r4 .r_center .zhu {
width: 100%;
font-size: 0.14rem;
color: #9c9c9c;
text-align: center;
line-height: 5em;
}
#about_1 .row.r4 .r_btm ul {
width: 8.5rem;
margin: 20px auto 0;
}
#about_1 .row.r4 .r_btm ul li {
transform: skew(-10deg, 0);
position: relative;
margin-bottom: 20px;
transition: all 0.3s ease;
}
#about_1 .row.r4 .r_btm ul li i{
opacity: 0;pointer-events: none;
transition: all 0.3s ease;
}
#about_1 .row.r4 .r_btm ul li i img {
width: 32px;
height: 40px;
position: absolute;
top: -19px;
left: 0;
right: 0;
margin: auto;
transform: skew(10deg, 0);
opacity: 0;
}
#about_1 .row.r4 .r_btm ul li p {
width: 80%;
text-align: center;
font-size: 14px;
color: #595959;
margin: 0 auto;
transform: skew(10deg, 0);
}
#about_1 .row.r4 .r_btm ul li:hover {
background-color: #337aff;
padding: 23px 0 10px 0;
box-shadow: 0 4px 0 #e5e5e5;
position: relative;
}
#about_1 .row.r4 .r_btm ul li:hover i,#about_1 .row.r4 .r_btm ul li:hover i > img{
opacity: 1;
}
#about_1 .row.r4 .r_btm ul li.horHref p{
color: #337aff;
text-decoration: underline;
}
#about_1 .row.r4 .r_btm ul li:hover p {
font-size: 16px;
color: #fff;
}
#about_3 .row .r_center .mapNote {
text-align: right;
padding-bottom: 0.14rem;
border-bottom: 2px solid #1f65e7;
}
#about_3 .row .r_center .mapNote > span {
display: inline-block;
height: 0.32rem;
line-height: 0.32rem;
font-size: 0.12rem;
margin-left: 0.24rem;
}
#about_3 .row .r_center .mapNote > span > img {
vertical-align: sub;
margin-right: 0.1rem;
}
#about_3 .r1 .top_p {
color: #1f65e7;
font-size: 0.18rem;
font-weight: bold;
line-height: 175%;
padding: 0.2rem 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 0.48rem;
}
#about_3 .r1 .r_center .picBox {
margin: 0.32rem 0 0.2rem 0;
text-align: center;
}
#about_3 .r1 .r_center .picBox > img {
width: 100%;
}
#about_3 .r2 .r_center .picBox {
margin: 0.32rem 0 0.2rem 0;
text-align: center;
position: relative;
}
#about_3 .r2 .r_center .picBox > ul{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#about_3 .r2 .r_center .picBox > ul .adr_dot{
position: absolute;
height: 32px;
line-height: 32px;
display: inline-block;
cursor: pointer;
white-space: nowrap;
}
#about_3 .r2 .r_center .picBox > ul .adr_dot > img{
vertical-align: middle;
margin: 0 3px;
display: none;
}
#about_3 .r2 .r_center .picBox > ul .adr_dot > span{
margin-right: 2px;
vertical-align: middle;
font-size: 14px;
height: 32px;
line-height: 32px;
display: inline-block;
width: 70px;
text-align: left;
padding-left: 24px;
position: relative;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_3 .r2 .r_center .picBox > ul .adr_dot > span:after{
content:"";
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
left: 0;
background-color: #1f65e7;
opacity: 0.8;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_3 .r2 .r_center .picBox > ul .adr_dot:hover > span{
font-size: 18px;
font-weight: bold;
color: #1f65e7;
}
#about_3 .r2 .r_center .picBox > ul .adr_dot:hover > span:after{
opacity: 1;
transform:scale(1.1);
}
#about_3 .r2 .r_center .picBox > ul .adr_dot:hover > img{
display: inline;
}
#about_3 .r2 .r_center .picBox > img {
display: block;
margin: auto;
max-width: 100%;
}
#about_6 .r2 .r_center .picBox .yearItem {
top: 0;
bottom: 0;
margin: auto;
right: 15%;
height: 1.2rem;
padding: 0 0.4rem;
}
#about_6 .r2 .r_center .picBox .yearItem > li {
width: 2rem;
height: 1.2rem;
}
#about_6 .r2 .r_center .picBox .yearItem > li .yearList {
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
line-height: 0.6rem;
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
position: absolute;
visibility: hidden;
opacity: 0;
transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.8s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_6 .r2 .r_center .picBox .yearItem > li .yearList > small {
display: block;
text-align: left;
text-transform: uppercase;
font-size: 0.18rem;
color: rgba(255, 255, 255, 0.6);
}
#about_6 .r2 .r_center .picBox .yearItem > li .yearList.on {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
}
#about_6 .r2 .r_center .picBox .yearItem > a.iconfont {
color: rgba(255, 255, 255, 0.7);
font-size: 0.4rem;
line-height: 0.4rem;
text-align: center;
display: inline-block;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_6 .r2 .r_center .picBox .yearItem > a.iconfont:hover {
color: #fff;
}
#about_6 .r3 .r_center .fu_activity .box {
display: table;
width: 49.5%;
overflow: visible;
height: 100%;
visibility: hidden;
position: relative;
}
#about_6 .r3 .r_center .fu_activity .box > .cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#about_6 .r3 .r_center .fu_activity .box > .cell > p {
text-align: center;
font-size: 0.42rem;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
width: 80%;
margin: auto;
line-height: 0.5rem;
}
#about_6 .r3 .r_center .fu_activity .box > .cell > span {
display: block;
width: 60%;
margin: auto;
color: #fff;
font-size: 0.16rem;
font-weight: bold;
text-align: center;
line-height: 28px;
}
#about_6 .r3 .r_center .fu_activity .box > .cell > a {
display: inline-block;
cursor: pointer;
text-align: center;
font-size: 0.12rem;
font-weight: bold;
border-radius: 50px;
padding: 5px 20px;
}
#about_6 .r3 .r_center .fu_activity .box > .cell > a.look {
background-color: #fff;
color: #4f728a;
margin-top: 0.12rem;
}
#about_6 .r3 .r_center .fu_activity .box > .cell > a.Tmore {
color: #fff;
background-color: #1b1d1f;
letter-spacing: 5px;
}
#about_6 .r3 .r_center .fu_activity .box.picBox {
margin-bottom: 1%;
}
#about_6 .r3 .r_center .fu_activity .box .arrow {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 12px;
top: 0;
bottom: 0;
margin: auto;
border-color: transparent #fff transparent transparent;
}
#about_5 .r2 .r_center .small_txt {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 2rem;
height: 0.5rem;
font-size: 0.2rem;
}
#about_5 .r2 .r_center .view_dot {
width: 2.5rem;
}
#about_5 .r2 .r_center .view_dot > h6 {
border-bottom: 2px solid #f29600;
color: #f29600;
font-size: 0.2rem;
height: 0.48rem;
line-height: 0.48rem;
}
#about_5 .r2 .r_center .view_dot > h6 > small {
color: #ccc;
text-transform: uppercase;
font-size: 0.2rem;
font-weight: 300;
margin-left: 0.15rem;
}
#about_5 .r2 .r_center .view_dot > ul > li {
font-size: 0.14rem;
color: #595959;
margin: 0.1rem 0;
text-transform: initial;
}
#about_5 .r2 .r_center .view_dot > ul > li > b {
display: inline-block;
width: 0.4rem;
text-align: left;
color: #333;
}
#about_5 .r3 .r_center .dot:after {
content: "";
position: absolute;
width: 25px;
height: 23px;
left: 0;
right: 0;
margin: auto;
top: -0.48rem;
background: url(../images/dot.png) center no-repeat;
}
#about_5 .r4 .r_center .brandItem {
display: flex;
justify-content: space-around;
align-items: stretch;
box-sizing: border-box;
margin: 0.32rem 0;
border: 1px solid #cad0d9;
overflow: hidden;
}
#about_5 .r4 .r_center .brandItem > li {
position: relative;
text-align: center;
width: 25%;
float: left;
border-left: 1px solid #cad0d9;
padding: 0.2rem 0;
background-color: #f7f9fa;
}
#about_5 .r4 .r_center .brandItem > li:first-child {
border-left: none;
}
#about_5 .r4 .r_center .brandItem > li:nth-child(2n) {
background-color: #fff;
}
#about_5 .r4 .r_center .brandItem > li > img {
height: 0.42rem;
}
#about_5 .r4 .r_center .brandItem > li > span {
display: block;
text-align: center;
color: #5f1985;
font-weight: bold;
font-size: 0.2rem;
}
#about_5 .r4 .r_center .brandItem > li > span:nth-child(2) {
margin: 0.18rem 0;
}
#about_5 .r4 .r_center .brandItem > li > small {
display: block;
text-align: center;
font-size: 0.16rem;
color: #999;
width: 60%;
margin: 6px auto;
height: 0.48rem;
}
#about_5 .r5 .r_center .fu_item {
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
position: relative;
}
#about_5 .r5 .r_center .fu_item > li {
display: inline-block;
height: 100%;
width: 25%;
position: relative;
transform: skew(0, -2.4deg);
-webkit-transform: skew(0, -2.4deg);
-moz-transform: skew(0, -2.4deg);
-o-transform: skew(0, -2.4deg);
}
#about_5 .r5 .r_center .fu_item > li .picBox {
position: absolute;
opacity: 0.11;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_5 .r5 .r_center .fu_item > li:hover .picBox {
opacity: 0.8;
}
#about_5 .r5 .r_center .fu_item > li:hover > .Tmsg small {
color: #fff;
}
#about_5 .r5 .r_center .fu_item > li > .Tcon {
transform: skew(0, 2.4deg);
-webkit-transform: skew(0, 2.4deg);
-moz-transform: skew(0, 2.4deg);
-o-transform: skew(0, 2.4deg);
text-align: center;
z-index: 5;
display: inline-block;
height: 0.4rem;
width: 0.6rem;
position: absolute;
top: -1rem;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#about_5 .r5 .r_center .fu_item > li > .Tcon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0.6rem;
height: 1px;
background-color: #333;
}
#about_5 .r5 .r_center .fu_item > li > .Tmsg {
transform: skew(0, 2.4deg);
-webkit-transform: skew(0, 2.4deg);
-moz-transform: skew(0, 2.4deg);
-o-transform: skew(0, 2.4deg);
position: absolute;
width: 100%;
padding: 0 0.2rem;
bottom: 0.8rem;
left: 0;
}
#about_5 .r5 .r_center .fu_item > li > .Tmsg > span {
display: block;
font-size: 0.2rem;
font-weight: bold;
text-align: left;
color: #5f1985;
}
#about_5 .r5 .r_center .fu_item > li > .Tmsg > small {
font-size: 0.12rem;
font-weight: 300;
color: #999999;
margin-top: 0.1rem;
display: inline-block;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#about_5 .r5 .r_center .fu_item > li:nth-child(2n) {
transform: skew(0, -2.4deg) translateY(20px);
-webkit-transform: skew(0, -2.4deg) translateY(20px);
-moz-transform: skew(0, -2.4deg) translateY(20px);
-o-transform: skew(0, -2.4deg) translateY(20px);
}
#about_5 .r5 .r_center .fu_item > li:nth-child(2n) > .Tcon {
top: 1rem;
}
#about_5 .r5 .r_center .fu_item > li:nth-child(2n) > .Tmsg {
bottom: auto;
top: 0.8rem;
}
/* 清除浮动 */
.clear-both:after {
content: '';
width: 0;
height: 0;
display: block;
clear: both;
visibility: hidden;
}
/* 弹窗视频 */
#xcVideo {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0;
left: 0;
z-index: 100000;
}
#xcVideo video {
width: 80%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#xcVideo .close {
width: 0.8rem;
height: 0.8rem;
border-radius: 0 0 0 0.8rem;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
#xcVideo .close i {
display: block;
font-size: 0.4rem;
line-height: 0.7rem;
text-align: right;
margin-right: 0.1rem;
}
/*2.11æ·»åŠ */
.mt-20 {
margin-top: 20px;
}
.client_page1 .img,
.client_page1 .img img {
width: 168px;
}
.client_page1 .img {
position: relative;
float: left;
}
.client_page1 .textArea {
width: auto;
float: none;
display: block;
margin-left: 205px;
font-size: 14px;
}
.b-b {
border-bottom: 1px #dbdbdb solid;
position: relative;
float: left;
width: 100%;
margin-top: 30px;
}
.dutyItem {
width: 100%;
margin-top: 60px;
position: relative;
float: left;
}
.dutyItem h3 {
width: 100%;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.dutyItem img {
margin-top: 10px;
float: none;
}
.dutyItem i {
width: 225px;
position: relative;
float: left;
font-style: normal;
overflow: hidden;
text-align: center;
}
.dutyItem .textArea {
margin-top: 20px;
margin-left: 240px;
width: auto;
float: none;
display: block;
font-size: 14px;
}
.dutyItem.r i {
float: right;
}
.dutyItem.r .textArea {
margin: 20px 240px 0 0;
}
.creditor {
overflow: hidden;
}
.creditor div {
position: relative;
float: left;
}
.creditor ul {
width: 120%;
}
.creditor li {
width: 440px;
height: 225px;
overflow: hidden;
font-size: 14px;
margin-right: 80px;
display: inline;
margin-top: 20px;
position: relative;
float: left;
}
.creditor li i {
width: 70px;
height: 71px;
position: relative;
float: left;
overflow: hidden;
}
.creditor li h3 {
float: none;
display: block;
margin-left: 80px;
font-size: 18px;
font-weight: bold;
margin-top: 12px;
}
.network .select-div dl {
float: left;
position: relative;
width: 200px;
height: 40px;
cursor: pointer;
margin-right: 40px;
}
.network .select-div dl dt {
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
transform: skewX(-18deg);
transform-origin: right bottom;
position: relative;
}
.network .select-div dl dt i {
display: block;
position: absolute;
color: #fff;
text-align: center;
font-size: 30px;
width: 40px;
height: 100%;
right: 0;
top: 0;
background-color: #dfdfdf;
}
.network .select-div dl dt span {
transform: skewX(18deg);
display: block;
text-indent: 20px;
}
.network .select-div dl dd {
display: none;
border: 1px solid #ccc;
border-top: none;
position: absolute;
top: 40px;
left: 0;
width: 200px;
background-color: #fff;
z-index: 99;
}
.network .select-div dl dd li {
height: 40px;
line-height: 40px;
text-align: center;
}
.network .select-div dl dd li:hover {
background-color: #eee;
}
.network .select-div .search {
width: 180px;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
font-size: 16px;
position: relative;
float: left;
cursor: pointer;
}
.network .select-div .search::before {
width: 180px;
height: 100%;
background-color: #2640bf;
display: block;
position: absolute;
content: '';
left: 0;
top: 0;
transform: skewX(-18deg);
z-index: -1;
}
.network .map-div {
margin-top: 100px;
}
.network .map-div .list {
width: 500px;
float: left;
}
.network .map-div .list li {
position: relative;
padding: 0 0 40px 90px;
margin-bottom: 40px;
border-bottom: 1px solid #ccc;
padding-right: 50px;
}
.network .map-div .list li h3 {
font-size: 16px;
color: #636363;
margin-bottom: 10px;
}
.network .map-div .list li p {
font-size: 14px;
color: #9c9c9c;
}
.network .map-div .list li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 16px;
}
.network .map-div .list li span::before {
display: block;
content: '';
position: absolute;
width: 40px;
height: 40px;
background-color: #6e6765;
left: 0;
top: 0;
transform: skewX(-18deg);
z-index: -1;
}
.network .map-div .list li i {
display: block;
position: absolute;
right: 12px;
top: 10px;
font-size: 30px;
color: #9c9c9c;
cursor: pointer;
}
.network .map-div .list li:hover span::before {
background-color: #2640bf;
}
.network .map-div .list li:hover h3 {
color: #2640bf;
}
.network .map-div #map {
width: 500px;
float: right;
height: 600px;
}
.network #shop{
height: 6.4rem;
overflow: auto;
padding-left: 10px;
}
.network #province,.network #city{
max-height: 4rem;
overflow: auto;
}
.network #shop::-webkit-scrollbar,.network #province::-webkit-scrollbar,.network #city::-webkit-scrollbar
{
width: 3px;
border-radius: 1.5px;
}
.network #shop::-webkit-scrollbar-button,.network #province::-webkit-scrollbar-button,.network #city::-webkit-scrollbar-button
{
display: none;
}
.network #shop::-webkit-scrollbar-track,.network #province::-webkit-scrollbar-track,.network #city::-webkit-scrollbar-track
{
background-color: #eee;
}
.network #shop::-webkit-scrollbar-thumb,.network #province::-webkit-scrollbar-thumb,.network #city::-webkit-scrollbar-thumb
{
background-color: #337aff;
}
/*æœç´¢*/
.Tsearch{
overflow: hidden;
}
.Tsearch div,.Tsearch span{
position: relative;
float: left;
}
.Tsearch span{
position: relative;
float: left;
}
.mr-10 {
margin-right: 10px;
}
.w-100 {
width: 100%;
}
.fbold {
font-weight: bold;
}
.f-16 {
font-size: 16px;
}
.h-35 {
line-height: 35px;
}
.Tsearch .searchPage{
width: 100%;display: inline;
position: relative;
float: left;
}
.Tsearch .searchPage form{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.Tsearch .searchPage .ipt{
border: 1px solid #b6b6b6;
height: 36px;
line-height: 36px;
padding: 6px;
width: 300px;
background-color: #fafafa;
font-size: 14px;
float: left;
}
.Tsearch .searchPage .btn{
width: 100px;
height: 36px;
color: white;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
-webkit-appearance: none;
-webkit-border-radius: 0;
font-size: 16px;
cursor: pointer;
float: left;
margin-left: 10px;
border: none;
}
.Tsearch .searchPage em{
font-style: normal;
color: #c00;
font-size: 14px;
}
.Tsearch .searchPage .list,.Tsearch .searchPage .list ul,.Tsearch .searchPage .list li{
width: 100%;
}
.Tsearch .page.top {
margin: 30px 0 30px 0;
}
.Tsearch .page{
width: 100%;
height: 40px;
line-height: 32px;
overflow: hidden;
margin: 30px 0 0;
text-align: center;
padding-top: 2px;
}
.Tsearch .page a:hover, .Tsearch .page a.active {
background: #198eed;
color: #fff;
text-decoration: none;
border: 1px #198eed solid;
}
.Tsearch .page a {
padding: 7px 11px;
margin: 0 3px;
display: inline;
background-color: #fff;
color: #666;
border: 1px #dddddd solid;
}
.Tsearch .searchPage .list li {
margin-top: 10px;
}
.Tsearch .searchPage .list .el {
width: 100%;
font-size: 16px;
margin-bottom: 10px;
}
.Tsearch .searchPage .list .el .ty {
padding: 0 16px;
margin-right: 16px;
display: inline;
border-right: 1px solid #ddd;
}
.Tsearch .searchPage .list .textArea {
width: auto;
max-height: 66px;
overflow: hidden;
padding: 10px 20px;
border-top: 1px solid #ddd;
float: none;
display: block;
}
.Tsearch .searchPage .list .textArea a {
border-bottom: none;
color: #888;
}
.Tsearch .textArea * {
position: static;
float: none;
word-wrap: break-word;
}
#about_2 .r_btm {
margin: 0px 0;
}
#about_2 .r_btm .btnBox {
position: relative;
height: 0.5rem;
padding: 30px 0;
box-sizing: content-box;
}
#about_2 .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
color: #333;
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#about_2 .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;30px;
height: 0.5rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
#about_6 .r_btm {
margin-bottom: 30px;
}
#about_6 .r_btm .btnBox {
position: relative;
height: 0.5rem;
padding: 30px 0;
box-sizing: content-box;
}
#about_6 .r_btm .btnBox > .btn {
font-size: 0.16rem;
color: #abb3b9;
text-align: center;
color: #333;
width: 2.2rem;
height: 0.5rem;
background-color: transparent;
line-height: 0.5rem;
position: absolute;
left: 0;
right: 0;
top: 30px;
margin: auto;
z-index: 4;
}
#about_6 .r_btm .btnBox:after {
content: '';
position: absolute;
width: 2.2rem;30px;
height: 0.5rem;
left: 0;
right: 0;
top: 30px;
margin: auto;
background-color: #cfd8de;
z-index: 2;
transform: skew(0, -3deg);
-webkit-transform: skew(0, -3deg);
-moz-transform: skew(0, -3deg);
-o-transform: skew(0, -3deg);
}
/*下拉*/
.layout-down {
display: block;
padding-right: 0.4rem;
position: relative;
background-color: #337aff;
height: 0.4rem;
line-height: 0.4rem;
width: 150px;
cursor: pointer;
}
.layout-down span.downTxt {
display: inline-block;
width: 110px;
display: flex;
align-items: center;
position: relative;
border: none;
background-color: transparent;
box-sizing: border-box;
padding: 0.04rem 0.08rem;
height: 100%;
vertical-align: top;
}
.layout-down span.downTxt > span{color: #fff;font-weight: bold;font-size: 18px;}
.layout-down span.downTxt:after {
content: '';
width: 1px;
height: 50%;
top: 0;
bottom: 0;
background-color: #ddd;
right: 0;
position: absolute;
margin: auto;
}
.layout-down span.downIcon {
position: absolute;
right: 0;
width: 0.4rem;
top: 0;
height: 100%;
text-align: center;
box-sizing: border-box;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
height: 0.4rem;
line-height: 0.4rem;
color: #fff;
}
.layout-down ul.down {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
z-index: 100;
display: none;
}
.layout-down ul.down > li {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 0 0.08rem;
background-color: #fff;
float: left;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
}
.layout-down ul.down > li > span {
color: #333333c9;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
}
.layout-down ul.down > li:hover {
background-color: #2640bf;
}
.layout-down ul.down > li:hover > span {
color: #fff;
}
.layout-down.active span.downIcon {
transform: scale(-1);
-webkit-transform: scale(-1);
-moz-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
}
/* 分享 */
/*Layer*/
.Smohan_Layer_Shade{position:fixed; _position:absolute; zoom:1; top:0; left:0; width:100%; height:100%; overflow:hidden; background:url(../images/hei.png) repeat; z-index:99900;}
.Smohan_Layer_box{ min-width:300px; height:200px!important; padding:20px; background:#ffffff; position:fixed; _position:absolute; top:50%; left:50%; overflow:hidden; z-index:99999;-moz-border-radius:20px;-webkit-border-radius:20px;
border-radius:20px;}
.Smohan_Layer_box h3{ display:block; width:100%; height:30px; line-height:30px; padding:0px 0px 10px 0px; margin:0; border-bottom:1px solid #cccccc; overflow:hidden;}
.Smohan_Layer_box h3 .text{ float:left;font-size:16px; font-family:'Microsoft JhengHei','Microsoft YaHei', Arial, sans-serif; font-weight:600; color:#84c017; text-indent:0.5em; display:block;}
.Smohan_Layer_box h3 .close{ display:block; width:30px; height:30px; background:url(../images/Smohan.layer.close.png) 0px 0px no-repeat; float:right;}
.Smohan_Layer_box h3 .close:hover{background-position:0px -31px;}
.Smohan_Layer_box .layer_content{ display:block; width:100%; height:100%; margin-top:10px; margin-bottom:10px; padding:0; overflow:hidden; position:relative;}
.Smohan_Layer_box .layer_content .loading{ display:block; width:36px; height:36px; background:url(../images/Load.gif) center center no-repeat; position:absolute; top:0; left:0;}
/*Share*/
#Share{ display:none; width:360px; height:120px; padding:15px 10px;}
#Share ul{ margin:0; padding:0; list-style-type:none;}
#Share ul li{ float:left; display:block; width:50px; height:50px;margin-left:5px; margin-right:5px; cursor:pointer; position:relative;}
#Share ul li a{ display:block; width:28px; height:28px; margin-left:11px; margin-top:12px;}
#Share ul li span{ display:block;width:40px;height:10px;background:url(../images/share_shade.png) 0px 0px no-repeat; position:absolute; left:5px; bottom:0px;}
#Share ul li a.share1{ background:url(../images/share_icon2.png) 0px 0px;}
#Share ul li a.share2{ background:url(../images/share_icon2.png) -28px 0px;}
#Share ul li a.share3{ background:url(../images/share_icon2.png) -56px 0px;}
#Share ul li a.share4{ background:url(../images/share_icon2.png) -84px 0px;}
#Share ul li a.share5{ background:url(../images/share_icon2.png) -112px 0px;}
#Share ul li a.share6{ background:url(../images/share_icon2.png) -140px 0px;}
/*微信二维ç */
.none{
display: none;
}
.qrcode{
width:180px;
height:240px;
padding:20px;
position: fixed;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-140px;
background: #fff;
z-index: 100000;
}
.qrcode img{
max-width: 100%;
max-height:100%;
}
.weixin_close{
background: #7CBDD0;
display: inline-block;
width:100%;
height:30px;
line-height: 30px;
text-align: center;
color: #fff;
text-decoration: none
}
.ge-choose{
height: 40px;line-height: 40px;
bottom: -60px;
left: 0;
}
.ge-choose a{
display: inline-block;
height: 40px;line-height: 40px;text-align: center;
font-size: 16px;
font-weight: bold;
margin: 0 20px;
transition: all 0.3s;
}
.ge-choose a.on{
color: #2640bf;
text-decoration: underline;
}
.ge-choose a:hover{
color: #2640bf;
}
.fang ul.pa li{
font-size: 18px;
}
.fang span.pa{
width: 100%;
left: 0;
text-align: center;
bottom: 80px;
font-size: 14px;
color: rgba(0,0,0,0.3);
}
/* ie兼容 */
.ie #index .r2 .skew .buleMask2{
opacity: 0.6;
}
.ie #bloc #center #main .content .banner > .buleMask1.go{
-webkit-animation: bannergo1 2s forwards ease-in-out;
animation: bannergo1 2s forwards ease-in-out;
}
.ie10 #about_6 .r3 .r_center .fu_activity .box{
height: inherit;
}
.ie #baogao .r1 .r_center > ul li a.downLoad > i,
.ie #gonggao .r1 .r_center > ul li a.downLoad > i,
.ie #zhili .r1 .r_center > ul li a.downLoad > i,
.ie #baogao .r2 .r_center > ul li a.downLoad > i,
.ie #gonggao .r2 .r_center > ul li a.downLoad > i,
.ie #zhili .r2 .r_center > ul li a.downLoad > i{
display: inline-block;
vertical-align: top;
}
.ie #baogao .r1 .r_center > ul li a.downLoad,
.ie #gonggao .r1 .r_center > ul li a.downLoad,
.ie #zhili .r1 .r_center > ul li a.downLoad,
.ie #baogao .r2 .r_center > ul li a.downLoad,
.ie #gonggao .r2 .r_center > ul li a.downLoad,
.ie #zhili .r2 .r_center > ul li a.downLoad{
line-height: 0;
}
@-webkit-keyframes bannergo1 {
0% {
right: 0%;
opacity: 0.6;
}
60% {
right: -100%;
opacity: 0.6;
}
61% {
right: 100%;
opacity: 0;
}
100% {
right: 63%;
opacity: 0.6;
}
}
@keyframes bannergo1 {
0% {
right: 100%;
opacity: 0.6;
}
60% {
right: -100%;
opacity: 0.6;
}
60.0001% {
right: 100%;
opacity: 0;
}
100% {
right: 63%;
opacity: 0.6;
}
}
.pc{
display: block;
}
.app{
display: none!important;
}
/*英文版*/
.english .layout-down ul.down > li > span{
line-height: 22px;
display: inline-block;
vertical-align: middle;
}
.english #bloc #center #main .content #indexBanner .Tmsg > div:nth-child(4) > .addMore{
left: 80%;
}
.english #bloc #header #nav .childItem .childNav > li{
height: auto;
margin-bottom: 8px;
}
.english #bloc #header.on:after{
height: 4.6rem;
}
.english #bloc #header #nav .childItem .childNav > li > a{
font-size: 12px;vertical-align: top;
}
.english #index .r3 .r_center .proItem > .proList{
padding-top: 54px;
}
.english #index .r3 .r_center .proItem > .proList:after{
font-size: 0.18rem;
line-height: 20px;
}
.english #bloc #center #main .content .banner .b_txt > span{
letter-spacing: 5px;
}
.english #bloc #center #main .content .banner .b_txt.go > span{
letter-spacing: 0;
}
.english .layout-down span.downTxt > span{
font-size: 14px;line-height: 20px;
}
.english #bloc #center #main .content .banner .b_txt > span{
margin-bottom: 20px;
}
.english #bloc #center #main .content .banner.banner_about .b_txt > div:nth-child(4),.english #bloc #center #main .content .banner.banner_business .b_txt > div:nth-child(3){
letter-spacing: 1px;
}
.english #bloc #center #main .content .mainContent .nodeItem > a:before{
line-height: 14px;
bottom: 2px;
}
.english #about_5 .r2 .r_center .view_dot > ul > li > b{
display: block;
}
.english #about_5 .r5 .r_center .fu_item > li > .Tmsg > span{
font-size: 0.16rem;
font-weight: 500;
text-transform: initial;
}
.english #contact .row .r_top .title{
letter-spacing: 0;
}
.english #pro_nav .r1 .pro_type h5{
font-size: 0.2rem;
}
.english .layout-ul > li > span{
display: table;
height: 100%;
}
.english .layout-ul > li > span > small{
display: table-cell;
vertical-align: middle;
font-size: 14px;
}
.english #pro_nav .r1 .pro_type:hover, #pro_nav .r1 .pro_type.on{
z-index: 15;
width: 20%;
}
.english #bloc #center #main .content .banner .b_txt > span{
font-size: 0.42rem;
}
.english #bloc #center #main .content .banner .b_txt .picMove .next:after{
text-indent: 0;
line-height: 20px;
height: 20px;
top: 0;
bottom: 0;
margin: auto;
}
.english #bloc #center #main .content .bannerPro .aniBtn > a{
font-size: 0.12rem;
overflow: hidden;
}
.english #pro .r5 .r_center > .mycontact{
padding: 0.2rem 0.3rem;
}
.english #new .r2 .rowMain .r_top .hot{
top: 130%;
left: 0;
padding-left: 1.4rem;
}
.english #new .r2 .rowMain .r_top .hot .skewBox > a.Tcon,.english #new .r2 .rowMain .r_center .Tbox .layout-articles .layout-btm .skewBox > a.Tcon,.english #new_detail .r1 .rowMain .Tbox .articles .dot .skewBox > a.Tcon{
position: relative;
}
.english #new .r3 .rowMain .r_top .title .title_item,.english #new .r4 .rowMain .r_top .title .title_item{
left: 0;
top: 155%;
}
.english #new .r3 .rowMain .r_top .title .title_item > li > a,.english #new .r4 .rowMain .r_top .title .title_item > li > a{
font-size: 0.16rem;
}
.english #baogao .r3 .r_center > ul > li:after,.english #gonggao .r3 .r_center > ul > li:after, #zhili .r3 .r_center > ul > li:after{
line-height: 0.2rem;
font-size: 0.14rem;
}
.english #bloc #center #main .content .bannerPro .Tboli > li.skewBox > a.Tcon{
line-height: 0.2rem;
width: 90%;
}
.english #index .r2 .rowMain .half > div:nth-child(1) h4.show > small,.english #bloc #center #main .content .banner .b_txt > small{
text-transform: inherit;
}
.english #bloc #center #main .content .banner .b_txt{
left: 10%;
}
.english .about .founder_text{
font-size: 0.2rem!important;
}
.english #about_3 .r2 .r_center .picBox > ul .adr_dot > span{
width: auto;
}
.english #bloc #center #main .content .bannerPro .Tboli > li.skewBox .adv > div{
transform: none;
}
@media screen and (max-width: 800px) {
.english #bloc #center #main .content .banner .b_txt > small {
font-size: 12px !important;
line-height: 16px;
}
.english #about_3 .r1 .top_p{
font-size: 0.14rem;
}
.english #about_5 .r4 .r_center .brandItem > li > small{
line-height: 18px;
font-size: 0.14rem;
text-transform: initial;
}
.english #bloc #center #main .content .banner .b_txt > span{
letter-spacing: 0px;
}
.english #bloc #center #main .content .banner .b_txt > span{
font-size: 0.28rem;
}
.english #about_6 .r3 .r_center .fu_activity .box > .cell > span{
line-height: 18px;
}
.english #about_6 .r3 .r_center .fu_activity .box > .cell > p{
line-height: 0.4rem;
}
.english #pro_nav .r1 .pro_type:hover, #pro_nav .r1 .pro_type.on{
width: 50%;
}
.english #pro_nav .r1 .pro_type:nth-child(5):hover h5 .layout-ul{
left: -16%;
}
.english .layout-ul > li > span > small{
font-size: 12px;
}
.english .layout-ul > li > span > small{
line-height: 12px;
}
.english #pro_nav .r1 .pro_type:hover h5 .layout-ul,.english #pro_nav .r1 .pro_type.on h5 .layout-ul{
width: 90%;
}
.english .layout-ul{
left: -38%;
}
.english #pro .r5 .r_center{
line-height: 0.8rem;
}
.english #pro .guidao_list .skewBox > small > a{
display: inline-block;
height: 70px;
line-height: 22px;
margin-top: 22px;
}
.english #bloc #center #main .content .banner .b_txt > span{
margin-bottom: 8px;
}
}